diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md index f18f579dc4..a364881e80 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.spanish.md @@ -1,31 +1,24 @@ --- id: 587d774c367417b2b2512a9c title: Add a Text Alternative to Images for Visually Impaired Accessibility -localeTitle: Agregar una alternativa de texto a las imágenes para la accesibilidad de personas con discapacidad visual challengeType: 0 videoUrl: '' guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-alt-text-to-an-image-for-accessibility' +localeTitle: Agregar una alternativa de texto a las imágenes para la accesibilidad de personas con discapacidad visual --- ## Description -
-Es probable que haya visto un atributo alt en una etiqueta img en otros desafíos. Alt texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo: -<img src="importantLogo.jpeg" alt="Company logo"> -personas con discapacidades visuales confían en los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo alt y leer su contenido para entregar información clave. -buen texto alt es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo alt en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio. -
+
Es probable que hayas visto un atributo alt en una etiqueta img en otros desafíos. Alt texto alternativo describe el contenido de la imagen y proporciona una alternativa de texto. Esto ayuda en caso de que la imagen no se cargue o no pueda ser vista por un usuario. También es utilizado por los motores de búsqueda para comprender qué contiene una imagen para incluirla en los resultados de búsqueda. Aquí hay un ejemplo: <img src="importantLogo.jpeg" alt="Company logo"> personas con discapacidades visuales dependen de los lectores de pantalla para convertir el contenido web a una interfaz de audio. No obtendrán información si solo se presenta visualmente. Para las imágenes, los lectores de pantalla pueden acceder al atributo alt y leer su contenido para entregar información clave. El buen texto alt es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo alt en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio.
## Instructions -
-Camper Cat es tanto un ninja codificador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo alt en la etiqueta img , que explica que Camper Cat está haciendo karate. (La imagen src no se vincula a un archivo real, por lo que debería ver el texto alt en la pantalla). -
+
Resulta que Camper Cat es tanto un ninja codificador como un ninja real, y está construyendo un sitio web para compartir sus conocimientos. La imagen de perfil que desea usar muestra sus habilidades y debe ser apreciada por todos los visitantes del sitio. Agregue un atributo alt en la etiqueta img , que explica que Camper Cat está haciendo karate. (La imagen src no se vincula a un archivo real, por lo que debería ver el texto alt en la pantalla).
## Tests
```yml tests: - - text: 'Su etiqueta img debe tener un atributo alt , y no debe estar vacío' + - text: 'Su etiqueta img debe tener un atributo alt , y no debe estar vacía.' testString: 'assert($("img").attr("alt"), "Your img tag should have an alt attribute, and it should not be empty.");' ``` @@ -39,6 +32,7 @@ tests: ```html + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.spanish.md index d3d2a7e817..aa58d95a61 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.spanish.md @@ -1,24 +1,16 @@ --- id: 587d778b367417b2b2512aa8 title: Add an Accessible Date Picker -localeTitle: Añadir un selector de fecha accesible challengeType: 0 videoUrl: '' +localeTitle: Añadir un selector de fecha accesible --- ## Description -
-formularios a menudo incluyen el campo de input , que se puede usar para crear varios controles de formulario diferentes. El atributo de type en este elemento indica qué tipo de entrada se creará. -Usted puede haber notado el text y submit los tipos de entrada en los desafíos anteriores, y HTML5 introducido una opción para especificar una date campo. Dependiendo de la compatibilidad del navegador, un selector de fecha aparece en el campo de input cuando está enfocado, lo que facilita el llenado de un formulario para todos los usuarios. -Para los navegadores más antiguos, el tipo será el text predeterminado, por lo que es útil mostrar a los usuarios el formato de fecha esperado en la etiqueta o como texto de marcador de posición, por si acaso. -Aquí hay un ejemplo: -
<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
-
+
Los formularios a menudo incluyen el campo de input , que se puede usar para crear varios controles de formulario diferentes. El atributo de type en este elemento indica qué tipo de entrada se creará. Puede haber notado el text y submit los tipos de entrada en desafíos anteriores, y HTML5 introdujo una opción para especificar un campo de date . Dependiendo de la compatibilidad del navegador, un selector de fecha aparece en el campo de input cuando está enfocado, lo que facilita el llenado de un formulario para todos los usuarios. Para los navegadores más antiguos, el tipo será el text predeterminado, por lo que ayuda a mostrar a los usuarios el formato de fecha esperado en la etiqueta o como texto de marcador de posición, por si acaso. Aquí hay un ejemplo:
<label for = "input1"> Ingrese una fecha: </label>
<input type = "date" id = "input1" name = "input1">
## Instructions -
-Camper Cat está organizando un torneo de Mortal Kombat y quiere preguntar a sus competidores para ver qué fecha funciona mejor. Agregue una etiqueta de input con un atributo de type de "fecha", un atributo de id de "pickdate" y un atributo de name de "fecha". -
+
Camper Cat está organizando un torneo de Mortal Kombat y quiere preguntar a sus competidores para ver qué fecha funciona mejor. Agregue una etiqueta de input con un atributo de type de "fecha", un atributo de id de "pickdate" y un atributo de name de "fecha".
## Tests
@@ -67,6 +59,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.spanish.md index 2d28c617af..b674479f4b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.spanish.md @@ -1,22 +1,16 @@ --- id: 587d778f367417b2b2512aad title: Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information -localeTitle: Evite los problemas de ceguera al color al elegir cuidadosamente los colores que transmiten información challengeType: 0 videoUrl: '' +localeTitle: Evite los problemas de ceguera al color al elegir cuidadosamente los colores que transmiten información --- ## Description -
-Hay varias formas de ceguera al color. Estos pueden ir desde una sensibilidad reducida hasta una cierta longitud de onda de la luz hasta la incapacidad de ver el color. La forma más común es una sensibilidad reducida para detectar greens. -Por ejemplo, si dos colores verdes similares son el color de primer plano y de fondo de su contenido, es posible que un usuario que no tenga color no pueda distinguirlos. Los colores cercanos pueden considerarse vecinos de la rueda de colores, y deben evitarse esas combinaciones cuando se transmite información importante. -Nota
Algunas herramientas de selección de color en línea incluyen simulaciones visuales de cómo aparecen los colores para diferentes tipos de ceguera al color. Estos son excelentes recursos además de las calculadoras de comprobación de contraste en línea. -
+
Hay varias formas de ceguera al color. Estos pueden ir desde una sensibilidad reducida hasta una cierta longitud de onda de la luz hasta la incapacidad de ver el color. La forma más común es una sensibilidad reducida para detectar greens. Por ejemplo, si dos colores verdes similares son el color de primer plano y de fondo de su contenido, es posible que un usuario que no tenga color no pueda distinguirlos. Los colores cercanos pueden considerarse vecinos de la rueda de colores, y deben evitarse esas combinaciones cuando se transmite información importante. Nota
Algunas herramientas de selección de color en línea incluyen simulaciones visuales de cómo aparecen los colores para diferentes tipos de ceguera al color. Estos son excelentes recursos además de las calculadoras de comprobación de contraste en línea.
## Instructions -
-Camper Cat está probando diferentes estilos para un botón importante, pero el color de background-color amarillo ( #FFFF33 ) y el color verde ( #33FF33 ) son tonalidades #33FF33 en la rueda de colores y prácticamente no se distinguen para algunos usuarios con #33FF33 color . (Su luminosidad similar también falla la comprobación de la relación de contraste). Cambie el color del texto a azul oscuro ( #003366 ) para resolver ambos problemas. -
+
Camper Cat está probando diferentes estilos para un botón importante, pero el color de background-color amarillo ( #FFFF33 ) y el color de texto verde ( #33FF33 ) son tonalidades #33FF33 en la rueda de colores y prácticamente no se distinguen para algunos usuarios que #33FF33 color . (Su luminosidad similar también falla la comprobación de la relación de contraste). Cambie el color del texto a azul oscuro ( #003366 ) para resolver ambos problemas.
## Tests
@@ -52,6 +46,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md index 7f445b9ad6..56b5639dbe 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.spanish.md @@ -1,23 +1,16 @@ --- id: 587d778f367417b2b2512aac title: Avoid Colorblindness Issues by Using Sufficient Contrast -localeTitle: Evite los problemas de ceguera al color usando un contraste suficiente challengeType: 0 videoUrl: '' +localeTitle: Evite los problemas de ceguera al color usando un contraste suficiente --- ## Description -
-color es una gran parte del diseño visual, pero su uso presenta dos problemas de accesibilidad. Primero, el color solo no debe usarse como la única forma de transmitir información importante porque los usuarios de lectores de pantalla no la verán. En segundo lugar, los colores de fondo y de fondo necesitan un contraste suficiente para que los usuarios con daltonismo los puedan distinguir. -Los desafíos anteriores cubrieron tener alternativas de texto para abordar el primer problema. El último desafío introdujo herramientas de comprobación de contraste para ayudar con el segundo. La relación de contraste recomendada por WCAG de 4.5: 1 se aplica al uso del color así como a las combinaciones de escala de grises. -usuarios de Colorblind tienen problemas para distinguir algunos colores de otros, generalmente en tonos, pero a veces también con ligereza. Puede recordar que la relación de contraste se calcula utilizando los valores de luminancia relativa (o luminosidad) de los colores de primer plano y de fondo. -En la práctica, se puede alcanzar la proporción de 4.5: 1 oscureciendo el color más oscuro y aclarando el más claro con la ayuda de un comprobador de contraste de color. Los colores más oscuros en la rueda de colores se consideran azules, violetas, magentas y rojos, mientras que los colores más claros son naranjas, amarillos, verdes y verdes azules. -
+
El color es una gran parte del diseño visual, pero su uso presenta dos problemas de accesibilidad. Primero, el color solo no debe usarse como la única forma de transmitir información importante porque los usuarios de lectores de pantalla no la verán. En segundo lugar, los colores de fondo y de fondo necesitan un contraste suficiente para que los usuarios con daltonismo los puedan distinguir. Los desafíos anteriores cubrían tener alternativas de texto para abordar el primer problema. El último desafío introdujo herramientas de comprobación de contraste para ayudar con el segundo. La relación de contraste recomendada por WCAG de 4.5: 1 se aplica al uso del color así como a las combinaciones de escala de grises. Los usuarios de color daltónicos tienen problemas para distinguir algunos colores de otros, generalmente en tonos, pero a veces también con ligereza. Puede recordar que la relación de contraste se calcula utilizando los valores de luminancia relativa (o luminosidad) de los colores de primer plano y de fondo. En la práctica, se puede alcanzar la proporción de 4.5: 1 oscureciendo el color más oscuro y aclarando el más claro con la ayuda de un comprobador de contraste de color. Los colores más oscuros en la rueda de colores se consideran azules, violetas, magentas y rojos, mientras que los colores más claros son naranjas, amarillos, verdes y verdes azules.
## Instructions -
-Camper gato está experimentando con el uso del color para su blog de texto y el fondo, pero su actual combinación de un color verdoso background-color con el texto marrón color tiene un 2.5: 1 relación de contraste. Puede ajustar fácilmente la luminosidad de los colores ya que los declaró utilizando la propiedad hsl() CSS (que significa matiz, saturación, luminosidad) cambiando el tercer argumento. Aumente el valor de luminosidad del background-color del 35% al ​​55% y disminuya el valor de luminosidad del color del 20% al 15%. Esto mejora el contraste a 5.9: 1. -
+
Gato Camper está experimentando con el uso del color para su blog de texto y el fondo, pero su actual combinación de un color verdoso background-color con el texto marrón color tiene un 2.5: 1 relación de contraste. Puede ajustar fácilmente la luminosidad de los colores ya que los declaró utilizando la propiedad hsl() CSS (que significa matiz, saturación, luminosidad) cambiando el tercer argumento. Aumente el valor de luminosidad del background-color del 35% al ​​55% y disminuya el valor de luminosidad del color del 20% al 15%. Esto mejora el contraste a 5.9: 1.
## Tests
@@ -57,6 +50,7 @@ tests:

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+ ``` @@ -68,9 +62,7 @@ tests: ## Solution
- ```js -var code = "body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.spanish.md index 848009afa4..55e2cb3e85 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.spanish.md @@ -1,21 +1,16 @@ --- id: 587d778f367417b2b2512aae title: Give Links Meaning by Using Descriptive Link Text -localeTitle: Dar el significado de enlaces mediante el uso de texto de enlace descriptivo challengeType: 0 videoUrl: '' +localeTitle: Dar el significado de enlaces mediante el uso de texto de enlace descriptivo --- ## Description -
-Los usuarios de lectores de pantalla tienen diferentes opciones para el tipo de contenido que lee su dispositivo. Esto incluye saltar a (o sobre) elementos de hito, saltar al contenido principal u obtener un resumen de la página de los encabezados. Otra opción es escuchar solo los enlaces disponibles en una página. -Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que hay entre las etiquetas de ancla ( a ). Tener una lista de enlaces "haga clic aquí" o "leer más" no es útil. En su lugar, debe utilizar el texto breve pero descriptiva dentro de las a etiquetas para proporcionar más significado para estos usuarios. -
+
Los usuarios de lectores de pantalla tienen diferentes opciones para el tipo de contenido que lee su dispositivo. Esto incluye saltar a (o sobre) elementos de hito, saltar al contenido principal u obtener un resumen de la página de los encabezados. Otra opción es escuchar solo los enlaces disponibles en una página. Los lectores de pantalla hacen esto leyendo el texto del enlace, o lo que hay entre las etiquetas ancla ( a ). Tener una lista de enlaces "haga clic aquí" o "leer más" no es útil. En su lugar, debe utilizar el texto breve pero descriptiva dentro de las a etiquetas para proporcionar más significado para estos usuarios.
## Instructions -
-El texto del enlace que está utilizando Camper Cat no es muy descriptivo sin el contexto que lo rodea. Mueva las etiquetas de anclaje ( a ) para que envuelvan el texto "información sobre baterías" en lugar de "Haga clic aquí". -
+
El texto del enlace que está utilizando Camper Cat no es muy descriptivo sin el contexto que lo rodea. Mueva las etiquetas de anclaje ( a ) para que envuelvan el texto "información sobre baterías" en lugar de "Haga clic aquí".
## Tests
@@ -46,6 +41,7 @@ tests:

Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for information about batteries

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.spanish.md index a97023638b..0a4eb5570c 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.spanish.md @@ -1,25 +1,16 @@ --- id: 587d7789367417b2b2512aa4 title: Improve Accessibility of Audio Content with the audio Element -localeTitle: Mejorar la accesibilidad del contenido de audio con el elemento de audio challengeType: 0 videoUrl: '' +localeTitle: Mejorar la accesibilidad del contenido de audio con el elemento de audio --- ## Description -
-El elemento de audio de HTML5 da un significado semántico cuando envuelve el contenido de la transmisión de sonido o audio en su marca. El contenido de audio también necesita una alternativa de texto para que las personas sordas o con dificultades auditivas puedan acceder. Esto se puede hacer con el texto cercano en la página o un enlace a una transcripción. -La etiqueta de audio admite el atributo de controls . Esto muestra los controles de reproducción, pausa y otros controles predeterminados del navegador, y es compatible con la funcionalidad del teclado. Este es un atributo booleano, lo que significa que no necesita un valor, su presencia en la etiqueta activa la configuración. -Aquí hay un ejemplo: -
<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg" />
  <source src="audio/meow.ogg" type="audio/ogg" />
</audio>
-Nota
El contenido multimedia suele tener componentes tanto visuales como auditivos. Necesita subtítulos sincronizados y una transcripción para que los usuarios con discapacidades visuales y / o auditivas puedan acceder a ella. Generalmente, un desarrollador web no es responsable de crear los subtítulos o la transcripción, pero necesita saber para incluirlos. -
+
El elemento de audio de HTML5 le da un significado semántico cuando envuelve el contenido de la transmisión de sonido o audio en su marca. El contenido de audio también necesita una alternativa de texto para que las personas sordas o con dificultades auditivas puedan acceder. Esto se puede hacer con el texto cercano en la página o un enlace a una transcripción. La etiqueta de audio soporta el atributo de controls . Esto muestra los controles de reproducción, pausa y otros controles predeterminados del navegador, y es compatible con la funcionalidad del teclado. Este es un atributo booleano, lo que significa que no necesita un valor, su presencia en la etiqueta activa la configuración. Aquí hay un ejemplo:
<audio id = "meowClip" controles>
<source src = "audio / meow.mp3" type = "audio / mpeg" />
<source src = "audio / meow.ogg" type = "audio / ogg" />
</audio>
Nota
El contenido multimedia suele tener componentes tanto visuales como auditivos. Necesita subtítulos sincronizados y una transcripción para que los usuarios con discapacidades visuales y / o auditivas puedan acceder a ella. Generalmente, un desarrollador web no es responsable de crear los subtítulos o la transcripción, pero necesita saber para incluirlos.
## Instructions -
-hora de tomar un descanso de Camper Cat y conocer a su compañero campista Zersiax (@zersiax), un campeón de accesibilidad y un usuario de lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, agregue un elemento de audio después de la p . Incluir el atributo de controls . Luego coloque una etiqueta de source dentro de las etiquetas de audio con el atributo src configurado en "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" y type atributo establecido en "audio / mpeg". -Nota
El clip de audio puede sonar rápido y ser difícil de entender, pero esa es una velocidad normal para los usuarios de lectores de pantalla. -
+
Es hora de tomar un descanso de Camper Cat y conocer a su compañero de campista Zersiax (@zersiax), un campeón de la accesibilidad y un usuario lector de pantalla. Para escuchar un clip de su lector de pantalla en acción, agregue un elemento de audio después de la p . Incluir el atributo de controls . Luego coloque una etiqueta de source dentro de las etiquetas de audio con el atributo src configurado en "https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" y type atributo establecido en "audio / mpeg". Nota
El clip de audio puede sonar rápido y ser difícil de entender, pero esa es una velocidad normal para los usuarios de lectores de pantalla.
## Tests
@@ -62,6 +53,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.spanish.md index 1578519329..644ccac4d9 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.spanish.md @@ -1,23 +1,16 @@ --- id: 587d778a367417b2b2512aa5 title: Improve Chart Accessibility with the figure Element -localeTitle: Mejora la accesibilidad de la carta con la figura Elemento. challengeType: 0 videoUrl: '' +localeTitle: Mejora la accesibilidad de la carta con la figura Elemento. --- ## Description -
-HTML5 introdujo el elemento figure , junto con la figcaption relacionada. Usados ​​juntos, estos elementos envuelven una representación visual (como una imagen, diagrama o gráfico) junto con su título. Esto proporciona un aumento de accesibilidad doble al agrupar semánticamente el contenido relacionado y al proporcionar una alternativa de texto que explica la figure . -Para visualizaciones de datos como cuadros, la leyenda se puede usar para observar brevemente las tendencias o conclusiones para usuarios con discapacidades visuales. Otro desafío es cómo mover una versión de tabla de los datos del gráfico fuera de la pantalla (mediante CSS) para los usuarios de lectores de pantalla. -Aquí hay un ejemplo: tenga en cuenta que la figcaption va dentro de las etiquetas de figure y se puede combinar con otros elementos: -
<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>
-
+
HTML5 introdujo el elemento figure , junto con la figcaption relacionada. Usados ​​juntos, estos elementos envuelven una representación visual (como una imagen, diagrama o gráfico) junto con su título. Esto proporciona un aumento de accesibilidad doble al agrupar semánticamente el contenido relacionado y al proporcionar una alternativa de texto que explica la figure . Para visualizaciones de datos como cuadros, la leyenda se puede usar para observar brevemente las tendencias o conclusiones para usuarios con discapacidades visuales. Otro desafío es cómo mover una versión de tabla de los datos del gráfico fuera de la pantalla (mediante CSS) para los usuarios de lectores de pantalla. Aquí hay un ejemplo: tenga en cuenta que la figcaption va dentro de las etiquetas de la figure y se puede combinar con otros elementos:
<figura>
<img src = "roundhouseDestruction.jpeg" alt = "Foto de Camper Cat ejecutando una patada circular">
<br>
<figcaption>
Master Camper Cat demuestra la forma correcta de una patada circular.
</figcaption>
</figure>
## Instructions -
-Camper Cat está trabajando duro para crear un gráfico de barras apiladas que muestre la cantidad de tiempo por semana para pasar el entrenamiento en sigilo, combate y armas. Ayúdelo a estructurar mejor su página cambiando la etiqueta div que usó por una etiqueta de figure , y la etiqueta p que rodea el título a una etiqueta de figcaption . -
+
Camper Cat está trabajando duro para crear un gráfico de barras apiladas que muestre la cantidad de tiempo por semana para pasar el entrenamiento en sigilo, combate y armas. Ayúdelo a estructurar mejor su página cambiando la etiqueta div que usó por una etiqueta de figure , y la etiqueta p que rodea el título a una etiqueta de figcaption .
## Tests
@@ -88,6 +81,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.spanish.md index f25bd6f255..1b6ca5c4c0 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.spanish.md @@ -1,24 +1,16 @@ --- id: 587d778a367417b2b2512aa6 title: Improve Form Field Accessibility with the label Element -localeTitle: Mejorar la accesibilidad del campo de formulario con la etiqueta Elemento challengeType: 0 videoUrl: '' +localeTitle: Mejorar la accesibilidad del campo de formulario con la etiqueta Elemento --- ## Description -
-mejora de la accesibilidad con el código HTML semántico se aplica al uso de nombres de etiquetas y atributos apropiados. Los siguientes varios desafíos cubren algunos escenarios importantes utilizando atributos en formularios. -La label etiqueta envuelve el texto de un elemento de control de formulario específico, generalmente el nombre o la etiqueta de una opción. Esto vincula el significado al elemento y hace que la forma sea más legible. El atributo for en una label etiqueta asocia explícitamente esa label con el control de formulario y es utilizado por los lectores de pantalla. -Aprendió sobre los botones de radio y sus etiquetas en una lección en la sección HTML básico. En esa lección, envolvimos el elemento de entrada del botón de radio dentro de un elemento de label junto con el texto de la etiqueta para poder hacer clic en el texto. Otra forma de lograr esto es utilizando el atributo for como se explica en esta lección. -El valor del atributo for debe ser el mismo que el valor del atributo id del control de formulario. Aquí hay un ejemplo: -
<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>
-
+
La mejora de la accesibilidad con el marcado HTML semántico se aplica al uso de nombres de etiquetas y atributos apropiados. Los siguientes varios desafíos cubren algunos escenarios importantes utilizando atributos en formularios. La label etiqueta envuelve el texto de un elemento de control de formulario específico, generalmente el nombre o la etiqueta de una opción. Esto vincula el significado al elemento y hace que la forma sea más legible. El atributo for en una label etiqueta asocia explícitamente esa label con el control de formulario y es utilizado por los lectores de pantalla. Aprendió sobre los botones de radio y sus etiquetas en una lección en la sección HTML básico. En esa lección, envolvimos el elemento de entrada del botón de radio dentro de un elemento de label junto con el texto de la etiqueta para poder hacer clic en el texto. Otra forma de lograr esto es utilizando el atributo for como se explica en esta lección. El valor del atributo for debe ser el mismo que el valor del atributo id del control de formulario. Aquí hay un ejemplo:
<form>
<label for = "name"> Name: </label>
<input type = "text" id = "name" name = "name">
</form>
## Instructions -
-Camper Cat espera mucho interés en las publicaciones de su blog, y desea incluir un formulario de registro por correo electrónico. Agregue un atributo for en la label correo electrónico que coincida con el id en su campo de input . -
+
Camper Cat espera mucho interés en las publicaciones de su blog, y desea incluir un formulario de registro por correo electrónico. Agregue un atributo for en la label correo electrónico que coincida con el id en su campo de input .
## Tests
@@ -72,6 +64,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.spanish.md index 07cd930552..0fad382e61 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.spanish.md @@ -1,21 +1,16 @@ --- id: 587d778e367417b2b2512aab title: Improve Readability with High Contrast Text -localeTitle: Mejora la legibilidad con texto de alto contraste challengeType: 0 videoUrl: '' +localeTitle: Mejora la legibilidad con texto de alto contraste --- ## Description -
-bajo contraste entre los colores de primer plano y de fondo puede dificultar la lectura del texto. Un contraste suficiente mejora la legibilidad de su contenido, pero ¿qué significa exactamente "suficiente"? -Las Pautas de Accesibilidad al Contenido en la Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1: 1 para el mismo color, o sin contraste, a 21: 1 para blanco contra negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación para usted. -
+
El bajo contraste entre los colores de fondo y de primer plano puede dificultar la lectura del texto. Un contraste suficiente mejora la legibilidad de su contenido, pero ¿qué significa exactamente "suficiente"? Las Pautas de Accesibilidad al Contenido en la Web (WCAG) recomiendan al menos una relación de contraste de 4.5 a 1 para el texto normal. La relación se calcula comparando los valores de luminancia relativa de dos colores. Esto varía de 1: 1 para el mismo color, o sin contraste, a 21: 1 para blanco contra negro, el contraste más fuerte. Hay muchas herramientas de comprobación de contraste disponibles en línea que calculan esta relación para usted.
## Instructions -
-La elección del texto gris claro de Camper Cat sobre un fondo blanco para su reciente publicación en el blog tiene una relación de contraste de 1.5: 1, lo que dificulta su lectura. Cambie el color del texto del gris actual ( #D3D3D3 ) a un gris más oscuro ( #636363 ) para mejorar la relación de contraste a 6: 1. -
+
La elección del texto gris claro de Camper Cat sobre un fondo blanco para su reciente publicación en el blog tiene una relación de contraste de 1.5: 1, lo que dificulta su lectura. Cambie el color del texto del gris actual ( #D3D3D3 ) a un gris más oscuro ( #636363 ) para mejorar la relación de contraste a 6: 1.
## Tests
@@ -55,6 +50,7 @@ tests:

As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.spanish.md index 87b0afa019..0ac75f07e8 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.spanish.md @@ -1,23 +1,16 @@ --- id: 587d774e367417b2b2512a9f title: Jump Straight to the Content Using the main Element -localeTitle: Ir directamente al contenido usando el elemento principal challengeType: 0 videoUrl: '' +localeTitle: Ir directamente al contenido usando el elemento principal --- ## Description -
-HTML5 introdujo una serie de nuevos elementos que brindan a los desarrolladores más opciones al tiempo que incorporan funciones de accesibilidad. Estas etiquetas incluyen main , header , footer , nav , article y section , entre otras. -De forma predeterminada, un navegador presenta estos elementos de manera similar a la humble div . Sin embargo, usarlos cuando sea apropiado le da un significado adicional a su marca. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega un significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar un mejor resumen de la página o opciones de navegación para sus usuarios. -El elemento main se utiliza para envolver (usted lo adivinó) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información relacionada con el tema central de su página. No está diseñado para incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners. -La etiqueta main también tiene una característica de hito incorporada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez ha visto un enlace "Ir al contenido principal" en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia. -
+
HTML5 introdujo una serie de nuevos elementos que brindan a los desarrolladores más opciones al tiempo que incorporan funciones de accesibilidad. Estas etiquetas incluyen main , header , footer , nav , article y section , entre otras. Por defecto, un navegador presenta estos elementos de manera similar a la humble div . Sin embargo, usarlos cuando sea apropiado le da un significado adicional a su marca. El nombre de la etiqueta solo puede indicar el tipo de información que contiene, lo que agrega un significado semántico a ese contenido. Las tecnologías de asistencia pueden acceder a esta información para proporcionar un mejor resumen de la página o opciones de navegación para sus usuarios. El elemento main se utiliza para envolver (usted lo adivinó) el contenido principal, y solo debe haber uno por página. Está destinado a rodear la información relacionada con el tema central de su página. No está diseñado para incluir elementos que se repiten en todas las páginas, como enlaces de navegación o banners. La etiqueta main también tiene una característica de hito incorporada que la tecnología de asistencia puede usar para navegar rápidamente al contenido principal. Si alguna vez ha visto un enlace "Ir al contenido principal" en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia.
## Instructions -
-Camper Cat tiene algunas grandes ideas para su página de armas ninja. Ayúdelo estableció su margen de beneficio mediante la adición de apertura y cierre de main etiquetas entre la header y footer (cubierto en otros desafíos). Mantener las etiquetas main vacías por ahora. -
+
Camper Cat tiene algunas grandes ideas para su página de armas ninja. Ayúdelo estableció su margen de beneficio mediante la adición de apertura y cierre de main etiquetas entre la header y footer (cubierto en otros desafíos). Mantener las etiquetas main vacías por ahora.
## Tests
@@ -46,6 +39,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.spanish.md index fa78b13e61..631ef3312d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.spanish.md @@ -1,24 +1,16 @@ --- id: 587d774c367417b2b2512a9d title: Know When Alt Text Should be Left Blank -localeTitle: Sepa cuándo el texto alternativo debe dejarse en blanco challengeType: 0 videoUrl: '' +localeTitle: Sepa cuándo el texto alternativo debe dejarse en blanco --- ## Description -
-En el último desafío, aprendiste que incluir un atributo alt en las etiquetas img es obligatorio. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos, el texto alt puede parecer redundante o innecesario. -En situaciones en las que una imagen ya está explicada con contenido de texto o no agrega un significado a una página, el img aún necesita un atributo alt , pero se puede establecer en una cadena vacía. Aquí hay un ejemplo: -<img src="visualDecoration.jpeg" alt=""> -Las imágenes de fondo también suelen caer bajo la etiqueta 'decorativa'. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado. -Nota
Para imágenes con un título, es posible que desee incluir texto alt , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen. -
+
En el último desafío, aprendiste que incluir un atributo alt en las etiquetas img es obligatorio. Sin embargo, a veces las imágenes se agrupan con un título que ya las describe, o se usan solo para decoración. En estos casos, el texto alt puede parecer redundante o innecesario. En situaciones en las que una imagen ya está explicada con contenido de texto o no agrega un significado a una página, el img aún necesita un atributo alt , pero se puede establecer en una cadena vacía. Aquí hay un ejemplo: <img src="visualDecoration.jpeg" alt=""> Las imágenes de fondo también suelen caer bajo la etiqueta 'decorativa'. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado. Nota
Para imágenes con un título, es posible que desee incluir texto alt , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen.
## Instructions -
-Camper Cat ha codificado una página de esqueleto para la parte del blog de su sitio web. Está planeando agregar un descanso visual entre sus dos artículos con una imagen decorativa de una espada samurai. Agregue un atributo alt a la etiqueta img y establézcalo en una cadena vacía. (Tenga en cuenta que la imagen src no se enlaza con un archivo real; no se preocupe si no se ven espadas en la pantalla). -
+
Camper Cat ha codificado una página de esqueleto para la parte del blog de su sitio web. Está planeando agregar un descanso visual entre sus dos artículos con una imagen decorativa de una espada samurai. Agregue un atributo alt a la etiqueta img y establézcalo en una cadena vacía. (Tenga en cuenta que la imagen src no se enlaza con un archivo real, no se preocupe si no se ven espadas en la pantalla).
## Tests
@@ -52,6 +44,7 @@ tests:

Is Chuck Norris a Cat Person?

To Come...

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.spanish.md index 5321fc466a..d66fb06f1f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.spanish.md @@ -1,28 +1,16 @@ --- id: 587d778d367417b2b2512aaa title: Make Elements Only Visible to a Screen Reader by Using Custom CSS -localeTitle: Haga que los elementos solo sean visibles para un lector de pantalla utilizando CSS personalizado challengeType: 0 videoUrl: '' +localeTitle: Haga que los elementos solo sean visibles para un lector de pantalla utilizando CSS personalizado --- ## Description -
-¿Ha notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico y el uso de etiquetas semánticamente significativas alrededor de su contenido antes de introducir el aspecto de diseño visual. -Sin embargo, la magia de CSS también puede mejorar la accesibilidad en su página cuando desea ocultar visualmente contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios de lectores de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos de solo lectura de pantalla fuera del área visual de la ventana del navegador. -Aquí hay un ejemplo de las reglas CSS que logran esto: -
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}
-Nota
Los siguientes enfoques de CSS NO harán lo mismo: -
    -
  • display: none; o visibility: hidden; oculta el contenido para todos, incluidos los usuarios de lectores de pantalla
    • -
  • Valores cero para tamaños de píxeles, tales como width: 0px; height: 0px; elimina ese elemento del flujo de su documento, lo que significa que los lectores de pantalla lo ignorarán
    • -
-
+
¿Ha notado que todos los desafíos de accesibilidad aplicados hasta ahora no han usado ningún CSS? Esto es para mostrar la importancia de un esquema de documento lógico y el uso de etiquetas semánticamente significativas alrededor de su contenido antes de introducir el aspecto de diseño visual. Sin embargo, la magia de CSS también puede mejorar la accesibilidad en su página cuando desea ocultar visualmente el contenido destinado solo para lectores de pantalla. Esto sucede cuando la información está en un formato visual (como un gráfico), pero los usuarios de lectores de pantalla necesitan una presentación alternativa (como una tabla) para acceder a los datos. CSS se utiliza para colocar los elementos de solo lectura de pantalla fuera del área visual de la ventana del navegador. Aquí hay un ejemplo de las reglas CSS que logran esto:
.sr-only {
posición: absoluta;
izquierda: -10000px;
ancho: 1px;
altura: 1px;
arriba: auto;
desbordamiento: oculto;
}
Nota
Los siguientes enfoques de CSS NO harán lo mismo:
  • display: none; o visibility: hidden; oculta el contenido para todos, incluidos los usuarios de lectores de pantalla
  • Valores cero para tamaños de píxeles, tales como width: 0px; height: 0px; elimina ese elemento del flujo de su documento, lo que significa que los lectores de pantalla lo ignorarán
## Instructions -
-Camper Cat creó un gráfico de barras apiladas realmente genial para su página de entrenamiento y puso los datos en una tabla para sus usuarios con discapacidades visuales. La tabla ya tiene una clase sr-only , pero las reglas de CSS aún no están completas. Asigne a la position un valor absoluto, el valor left a -10000px, y el width y el height ambos valores de 1px. -
+
Camper Cat creó un gráfico de barras apiladas realmente genial para su página de entrenamiento y puso los datos en una tabla para sus usuarios con discapacidades visuales. La tabla ya tiene una clase sr-only , pero las reglas de CSS aún no están completas. Asigne a la position un valor absoluto, el valor left a -10000px, y el width y el height ambos valores de 1px.
## Tests
@@ -132,6 +120,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.spanish.md index 0abbbc9573..ba435bc72e 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-links-navigatable-with-html-access-keys.spanish.md @@ -1,23 +1,16 @@ --- id: 587d7790367417b2b2512aaf title: Make Links Navigatable with HTML Access Keys -localeTitle: Haga que los enlaces sean navegables con claves de acceso HTML challengeType: 0 videoUrl: '' +localeTitle: Haga que los enlaces sean navegables con claves de acceso HTML --- ## Description -
-HTML ofrece la accesskey atributo para especificar una tecla de acceso directo para activar o traer el foco a un elemento. Esto puede hacer que la navegación sea más eficiente para usuarios que solo usan el teclado. -HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con los interactivos. Esto incluye enlaces, botones y controles de formulario. -Aquí hay un ejemplo: -<button accesskey="b">Important Button</button> -
+
HTML ofrece la accesskey atributo para especificar una tecla de acceso directo para activar o traer el foco a un elemento. Esto puede hacer que la navegación sea más eficiente para usuarios que solo usan el teclado. HTML5 permite que este atributo se use en cualquier elemento, pero es particularmente útil cuando se usa con los interactivos. Esto incluye enlaces, botones y controles de formulario. Aquí hay un ejemplo: <button accesskey="b">Important Button</button>
## Instructions -
-Camper Cat desea que los enlaces que se encuentran alrededor de los dos títulos de artículos de blogs tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agregue un atributo de accesskey a ambos enlaces y establezca el primero en "g" (para Garfield) y el segundo en "c" (para Chuck Norris). -
+
Camper Cat desea que los enlaces que se encuentran alrededor de los dos títulos de los artículos del blog tengan atajos de teclado para que los usuarios de su sitio puedan navegar rápidamente a la historia completa. Agregue un atributo de accesskey a ambos enlaces y establezca el primero en "g" (para Garfield) y el segundo en "c" (para Chuck Norris).
## Tests
@@ -65,6 +58,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.spanish.md index 5583a09336..3972a5653e 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.spanish.md @@ -1,20 +1,16 @@ --- id: 587d7788367417b2b2512aa3 title: Make Screen Reader Navigation Easier with the footer Landmark -localeTitle: Facilita la navegación por el lector de pantalla con el pie de página challengeType: 0 videoUrl: '' +localeTitle: Facilita la navegación por el lector de pantalla con el pie de página --- ## Description -
-igual que el header y la nav , el elemento de footer tiene una característica de marca incorporada que permite que los dispositivos de asistencia naveguen rápidamente hacia ella. Se utiliza principalmente para contener información de derechos de autor o enlaces a documentos relacionados que generalmente se encuentran en la parte inferior de una página. -
+
Al igual que el header y la nav , el elemento de footer tiene una característica de hito incorporada que permite que los dispositivos de asistencia naveguen rápidamente hacia él. Se utiliza principalmente para contener información de derechos de autor o enlaces a documentos relacionados que generalmente se encuentran en la parte inferior de una página.
## Instructions -
-La página de entrenamiento de Camper Cat está progresando bien. Cambie el div que usó para ajustar su información de copyright en la parte inferior de la página a un elemento de footer . -
+
La página de entrenamiento de Camper Cat está progresando bien. Cambie el div que usó para ajustar su información de copyright en la parte inferior de la página a un elemento de footer .
## Tests
@@ -72,6 +68,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.spanish.md index 47c60d6de0..6bfe334491 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.spanish.md @@ -1,23 +1,16 @@ --- id: 587d7787367417b2b2512aa1 title: Make Screen Reader Navigation Easier with the header Landmark -localeTitle: Haga que la navegación del lector de pantalla sea más fácil con el encabezado challengeType: 0 videoUrl: '' +localeTitle: Haga que la navegación del lector de pantalla sea más fácil con el encabezado --- ## Description -
-El siguiente elemento HTML5 que agrega un significado semántico y mejora la accesibilidad es la etiqueta del header . Se usa para envolver información introductoria o enlaces de navegación para su etiqueta principal, y funciona bien con el contenido que se repite en la parte superior de varias páginas. -header -comparte la característica de hito incorporada que vio con main , permitiendo que las tecnologías de asistencia naveguen rápidamente hacia ese contenido. -Nota
header está diseñado para su uso en la etiqueta del body de su documento HTML. Esto es diferente al elemento de head , que contiene el título de la página, metainformación, etc. -
+
El siguiente elemento HTML5 que agrega un significado semántico y mejora la accesibilidad es la etiqueta del header . Se usa para envolver información introductoria o enlaces de navegación para su etiqueta principal, y funciona bien con el contenido que se repite en la parte superior de varias páginas. header comparte la característica de hito incorporada que vio con main , permitiendo que las tecnologías de asistencia naveguen rápidamente hacia ese contenido. Nota
header está diseñado para su uso en la etiqueta del body de su documento HTML. Esto es diferente al elemento de head , que contiene el título de la página, metainformación, etc.
## Instructions -
-Camper Cat está escribiendo algunos artículos geniales sobre el entrenamiento de ninja, y quiere agregar una página para ellos en su sitio. Cambie la div superior que actualmente contiene el h1 a una etiqueta de header . -
+
Camper Cat está escribiendo algunos artículos geniales sobre el entrenamiento de ninja y desea agregar una página para ellos en su sitio. Cambie la div superior que actualmente contiene el h1 a una etiqueta de header .
## Tests
@@ -68,6 +61,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.spanish.md index 7f04fdbdbc..14ea1144c9 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.spanish.md @@ -1,21 +1,16 @@ --- id: 587d7788367417b2b2512aa2 title: Make Screen Reader Navigation Easier with the nav Landmark -localeTitle: Facilita la navegación por el lector de pantalla con el navegador Landmark challengeType: 0 videoUrl: '' +localeTitle: Facilita la navegación por el lector de pantalla con el navegador Landmark --- ## Description -
-El elemento de nav es otro elemento de HTML5 con la función de marca incorporada para facilitar la navegación del lector de pantalla. Esta etiqueta está diseñada para envolver alrededor de los enlaces de navegación principales en su página. -Si hay enlaces repetidos al sitio en la parte inferior de la página, no es necesario marcar también aquellos con una etiqueta de nav . Usar un footer (cubierto en el siguiente desafío) es suficiente. -
+
El elemento de nav es otro elemento de HTML5 con la función de marca incorporada para facilitar la navegación del lector de pantalla. Esta etiqueta está diseñada para envolver alrededor de los enlaces de navegación principales en su página. Si hay enlaces repetidos al sitio en la parte inferior de la página, no es necesario marcarlos también con una etiqueta de nav . Usar un footer (cubierto en el siguiente desafío) es suficiente.
## Instructions -
-Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un div . Cambie el div a una etiqueta de nav para mejorar la accesibilidad en su página. -
+
Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un div . Cambie el div a una etiqueta de nav para mejorar la accesibilidad en su página.
## Tests
@@ -72,6 +67,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md index 41a3913970..bd191fa569 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.spanish.md @@ -1,29 +1,23 @@ --- id: 587d778c367417b2b2512aa9 title: Standardize Times with the HTML5 datetime Attribute -localeTitle: Estandarizar los tiempos con el atributo datetime HTML5 challengeType: 0 videoUrl: '' +localeTitle: Estandarizar los tiempos con el atributo datetime HTML5 --- ## Description -
-Continuando con el tema de la fecha, HTML5 también introdujo el elemento de time junto con un atributo de datetime y datetime para estandarizar los tiempos. Este es un elemento en línea que puede ajustar una fecha u hora en una página. Un formato válido de esa fecha se mantiene en el atributo datetime . Este es el valor al que acceden los dispositivos de asistencia. Ayuda a evitar confusiones al indicar una versión estandarizada de un tiempo, incluso si está escrito de manera informal o coloquial en el texto. -Aquí hay un ejemplo: -<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p> -
+undefined ## Instructions -
-encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta de time alrededor del texto "Jueves, 15 de septiembre <sup> th </sup>" y agregue un atributo de datetime y datetime establecido en "2016-09-15". -
+
¡Los resultados de la encuesta de Mortal Kombat de Camper Cat están aquí! Envuelva una etiqueta de time alrededor del texto "Jueves, 15 de septiembre <sup> th </sup>" y agregue un atributo de datetime y datetime establecido en "2016-09-15".
## Tests
```yml tests: - - text: 'Sus etiquetas de time deben rodear el texto "Jueves 15 de septiembre <sup> th </sup>".' + - text: Sus etiquetas de time deben rodear el texto "Jueves 15 de septiembre <sup> th </sup>". testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your time tags should wrap around the text "Thursday, September 15<sup>th</sup>".");' - text: Su etiqueta de time debe tener un atributo de datetime y datetime que no esté vacío. testString: 'assert($("time").attr("datetime"), "Your time tag should have a datetime attribute that is not empty.");' @@ -73,6 +67,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.spanish.md index f8902d1e00..11c64dd89d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.spanish.md @@ -1,25 +1,16 @@ --- id: 587d774d367417b2b2512a9e title: Use Headings to Show Hierarchical Relationships of Content -localeTitle: Usar encabezados para mostrar relaciones jerárquicas de contenido challengeType: 0 videoUrl: '' +localeTitle: Usar encabezados para mostrar relaciones jerárquicas de contenido --- ## Description -
-encabezados (elementos h1 a h6 ) son etiquetas de trabajo que ayudan a proporcionar estructura y etiquetado a su contenido. Los lectores de pantalla pueden configurarse para leer solo los encabezados de una página, de modo que el usuario obtenga un resumen. Esto significa que es importante que las etiquetas de encabezado en su marca tengan un significado semántico y se relacionen entre sí, no para ser elegidas simplemente por sus valores de tamaño. -Significado semántico significa que la etiqueta que usa alrededor del contenido indica el tipo de información que contiene. -Si estuviera escribiendo un artículo con una introducción, un cuerpo y una conclusión, no tendría mucho sentido poner la conclusión como una subsección del cuerpo en su esquema. Debe ser su propia sección. Del mismo modo, las etiquetas de encabezado en una página web deben ir en orden e indicar las relaciones jerárquicas de su contenido. -encabezados con rango igual (o superior) inician nuevas secciones implícitas, los encabezados con subsecciones de inicio de rango inferior del anterior. -Como ejemplo, una página con un elemento h2 seguido de varias subsecciones etiquetadas con etiquetas h4 confundiría a un usuario lector de pantalla. Con seis opciones, es tentador usar una etiqueta porque se ve mejor en un navegador, pero puedes usar CSS para editar el tamaño relativo. -Un punto final, cada página debe tener siempre un elemento h1 (y solo uno), que es el tema principal de su contenido. Este y los otros encabezados son utilizados en parte por los motores de búsqueda para comprender el tema de la página. -
+
Los encabezados (elementos h1 a h6 ) son etiquetas de código de trabajo que ayudan a proporcionar estructura y etiquetado a su contenido. Los lectores de pantalla pueden configurarse para leer solo los encabezados de una página, de modo que el usuario obtenga un resumen. Esto significa que es importante que las etiquetas de encabezado en su marca tengan un significado semántico y se relacionen entre sí, no para ser elegidas simplemente por sus valores de tamaño. El significado semántico significa que la etiqueta que usa alrededor del contenido indica el tipo de información que contiene. Si estuvieras escribiendo un artículo con una introducción, un cuerpo y una conclusión, no tendría mucho sentido poner la conclusión como una subsección del cuerpo en tu esquema. Debe ser su propia sección. Del mismo modo, las etiquetas de encabezado en una página web deben ir en orden e indicar las relaciones jerárquicas de su contenido. Los encabezados con rango igual (o superior) inician nuevas secciones implícitas, encabezados con subsecciones de inicio de rango inferior de la anterior. Como ejemplo, una página con un elemento h2 seguido de varias subsecciones etiquetadas con etiquetas h4 confundiría a un usuario lector de pantalla. Con seis opciones, es tentador usar una etiqueta porque se ve mejor en un navegador, pero puedes usar CSS para editar el tamaño relativo. Un último punto, cada página debe tener siempre un elemento h1 (y solo uno), que es el tema principal de su contenido. Este y los otros encabezados son utilizados en parte por los motores de búsqueda para comprender el tema de la página.
## Instructions -
-Camper Cat quiere una página en su sitio dedicada a convertirse en ninja. Ayúdelo a arreglar los títulos para que su marca dé un significado semántico al contenido y muestre las relaciones correctas entre padres e hijos de sus secciones. Cambie todas las etiquetas h5 al nivel de título adecuado para indicar que son subsecciones de las h2 . -
+
Camper Cat quiere una página en su sitio dedicada a convertirse en un ninja. Ayúdelo a arreglar los títulos para que su marca dé un significado semántico al contenido y muestre las relaciones correctas entre padres e hijos de sus secciones. Cambie todas las etiquetas h5 al nivel de título adecuado para indicar que son subsecciones de las h2 .
## Tests
@@ -55,6 +46,7 @@ tests:
How to Breathe Properly
How to Simplify your Life
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.spanish.md index 209d3d57be..e340c49b46 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.spanish.md @@ -1,23 +1,16 @@ --- id: 587d7790367417b2b2512ab0 title: Use tabindex to Add Keyboard Focus to an Element -localeTitle: Use tabindex para agregar el foco de teclado a un elemento challengeType: 0 videoUrl: '' +localeTitle: Use tabindex para agregar el foco de teclado a un elemento --- ## Description -
-El atributo HTML tabindex tiene tres funciones distintas relacionadas con el enfoque del teclado de un elemento. Cuando está en una etiqueta, indica que el elemento se puede enfocar. El valor (un entero que es positivo, negativo o cero) determina el comportamiento. -Ciertos elementos, como los enlaces y los controles de formulario, reciben automáticamente el enfoque del teclado cuando un usuario se desplaza por una página. Está en el mismo orden en que los elementos vienen en el código fuente HTML. Esta misma funcionalidad se puede dar a otros elementos, como div , span p , colocando un tabindex="0" en ellos. Aquí hay un ejemplo: -<div tabindex="0">I need keyboard focus!</div> -Nota
Un valor de tabindex negativo (generalmente -1) indica que un elemento es enfocable, pero no es accesible por el teclado. Este método generalmente se usa para enfocar el contenido mediante programación (como cuando se activa un div para una ventana emergente), y está más allá del alcance de estos desafíos. -
+
El atributo HTML tabindex tiene tres funciones distintas relacionadas con el enfoque del teclado de un elemento. Cuando está en una etiqueta, indica que el elemento se puede enfocar. El valor (un entero que es positivo, negativo o cero) determina el comportamiento. Ciertos elementos, como los enlaces y los controles de formulario, reciben automáticamente el enfoque del teclado cuando un usuario se desplaza por una página. Está en el mismo orden en que los elementos vienen en el código fuente HTML. Esta misma funcionalidad se puede dar a otros elementos, como div , span p , colocando un tabindex="0" en ellos. Aquí hay un ejemplo: <div tabindex="0">I need keyboard focus!</div> Nota
Un valor de tabindex negativo (generalmente -1) indica que un elemento es enfocable, pero no es accesible por el teclado. Este método generalmente se usa para enfocar el contenido mediante programación (como cuando se activa un div para una ventana emergente), y está más allá del alcance de estos desafíos.
## Instructions -
-Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Sabe que los campos de entrada se enfocan automáticamente en el teclado, pero quiere asegurarse de que los usuarios de su teclado se detengan en las instrucciones mientras repasan los elementos. Agregue un atributo de tabindex a la etiqueta p y establezca su valor en "0". Bonus: el uso de tabindex también habilita la tabindex CSS :focus para trabajar en la etiqueta p . -
+
Camper Cat creó una nueva encuesta para recopilar información sobre sus usuarios. Sabe que los campos de entrada se enfocan automáticamente en el teclado, pero quiere asegurarse de que los usuarios de su teclado se detengan en las instrucciones mientras repasan los elementos. Agregue un atributo de tabindex a la etiqueta p y establezca su valor en "0". Bonus: el uso de tabindex también habilita la tabindex CSS :focus para trabajar en la etiqueta p .
## Tests
@@ -86,6 +79,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.spanish.md index f62c4f6bff..f5e48bc3ea 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.spanish.md @@ -1,25 +1,16 @@ --- id: 587d7790367417b2b2512ab1 title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements -localeTitle: Use tabindex para especificar el orden de enfoque del teclado para varios elementos challengeType: 0 videoUrl: '' +localeTitle: Use tabindex para especificar el orden de enfoque del teclado para varios elementos --- ## Description -
-El atributo tabindex también especifica el orden de tabulación exacto de los elementos. Esto se logra cuando el valor del atributo se establece en un número positivo de 1 o superior. -Establecer un tabindex = "1" traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de tabindex especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y tabindex="0" . -Es importante tener en cuenta que cuando el orden de tabulación se establece de esta manera, anula el orden predeterminado (que utiliza la fuente HTML). Esto puede confundir a los usuarios que esperan comenzar la navegación desde la parte superior de la página. Esta técnica puede ser necesaria en algunas circunstancias, pero en términos de accesibilidad, tenga cuidado antes de aplicarla. -Aquí hay un ejemplo: -<div tabindex="1">I get keyboard focus, and I get it first!</div> -<div tabindex="2">I get keyboard focus, and I get it second!</div> -
+
El atributo tabindex también especifica el orden de tabulación exacto de los elementos. Esto se logra cuando el valor del atributo se establece en un número positivo de 1 o superior. Establecer un tabindex = "1" traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de tabindex especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y tabindex="0" . Es importante tener en cuenta que cuando el orden de tabulación se establece de esta manera, anula el orden predeterminado (que utiliza la fuente HTML). Esto puede confundir a los usuarios que esperan comenzar la navegación desde la parte superior de la página. Esta técnica puede ser necesaria en algunas circunstancias, pero en términos de accesibilidad, tenga cuidado antes de aplicarla. Aquí hay un ejemplo: <div tabindex="1">I get keyboard focus, and I get it first!</div> <div tabindex="2">I get keyboard focus, and I get it second!</div>
## Instructions -
-Camper Cat tiene un campo de búsqueda en su página de citas inspiradoras que planea posicionar en la esquina superior derecha con CSS. Quiere que la input búsqueda y input controles de formulario de input sean los dos primeros elementos en el orden de tabulación. Agregue un tabindex atributos de tabindex a "1" a la input búsqueda, y un atributo de tabindex establecido a "2" a la input envío. -
+
Camper Cat tiene un campo de búsqueda en su página de citas inspiradoras que planea posicionar en la esquina superior derecha con CSS. Quiere que la input búsqueda y input controles de formulario de input sean los dos primeros elementos en el orden de tabulación. Agregue un tabindex atributos de tabindex a "1" a la input búsqueda, y un atributo de tabindex establecido a "2" a la input envío.
## Tests
@@ -76,6 +67,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.spanish.md index 58f3188a71..a331914072 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.spanish.md @@ -1,24 +1,16 @@ --- id: 587d774e367417b2b2512aa0 title: Wrap Content in the article Element -localeTitle: Envolver contenido en el artículo Elemento. challengeType: 0 videoUrl: '' +localeTitle: Envolver contenido en el artículo Elemento. --- ## Description -
-article es otro de los nuevos elementos HTML5 que agrega un significado semántico a su marca. Article es un elemento de sección y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en foros o artículos de noticias. -Determinar si el contenido puede ser independiente por lo general es una decisión de juicio, pero hay un par de pruebas simples que puede usar. Pregúntese si eliminó todo el contexto circundante, ¿ese contenido aún tendría sentido? De manera similar, para el texto, ¿se mantendría el contenido si estuviera en una fuente RSS? -Recuerde que las personas que usan tecnologías de asistencia confían en un marcado organizado semánticamente significativo para comprender mejor su trabajo. -Nota sobre la section y div
El elemento de section también es nuevo con HTML5 y tiene un significado semántico ligeramente diferente al article . Un article es para contenido independiente, y una section es para agrupar contenido relacionado temáticamente. Se pueden usar uno dentro del otro, según sea necesario. Por ejemplo, si un libro es el article , entonces cada capítulo es una section . Cuando no haya una relación entre grupos de contenido, use un div . -
<div> - groups content
<section> - groups related content
<article> - groups independent, self-contained content
-
+
article es otro de los nuevos elementos HTML5 que agrega un significado semántico a su marca. Article es un elemento de sección y se utiliza para envolver contenido independiente y autónomo. La etiqueta funciona bien con entradas de blog, publicaciones en foros o artículos de noticias. Determinar si el contenido puede ser independiente es generalmente una llamada de juicio, pero hay un par de pruebas simples que puede usar. Pregúntese si eliminó todo el contexto circundante, ¿ese contenido aún tendría sentido? De manera similar, para el texto, ¿se mantendría el contenido si estuviera en una fuente RSS? Recuerde que las personas que usan tecnologías de asistencia confían en un marcado organizado semánticamente significativo para comprender mejor su trabajo. Nota sobre la section y div
El elemento de section también es nuevo con HTML5 y tiene un significado semántico ligeramente diferente al article . Un article es para contenido independiente, y una section es para agrupar contenido relacionado temáticamente. Se pueden usar uno dentro del otro, según sea necesario. Por ejemplo, si un libro es el article , entonces cada capítulo es una section . Cuando no haya una relación entre grupos de contenido, use un div .
<div> - agrupa contenido
<sección> - grupos relacionados con el contenido
<article> - agrupa contenido independiente, independiente
## Instructions -
-Camper Cat usó etiquetas de article para envolver las publicaciones en su página de blog, pero se olvidó de usarlas en la parte superior. Cambie la etiqueta div para usar una etiqueta de article lugar. -
+
Camper Cat usó etiquetas de article para envolver las publicaciones en su página de blog, pero se olvidó de usarlas en la parte superior. Cambie la etiqueta div para usar una etiqueta de article lugar.
## Tests
@@ -61,6 +53,7 @@ tests:

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?...

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.spanish.md index 946534c0de..a603987715 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.spanish.md @@ -1,24 +1,16 @@ --- id: 587d778b367417b2b2512aa7 title: Wrap Radio Buttons in a fieldset Element for Better Accessibility -localeTitle: Envuelva los botones de radio en un elemento fieldset para una mejor accesibilidad challengeType: 0 videoUrl: '' +localeTitle: Envuelva los botones de radio en un elemento fieldset para una mejor accesibilidad --- ## Description -
-El siguiente tema del formulario cubre la accesibilidad de los botones de radio. A cada opción se le asigna una label con un atributo for vincula con el id del elemento correspondiente tal como se describe en el último desafío. Dado que los botones de radio a menudo vienen en un grupo donde el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto. -La etiqueta de fieldset rodea todo el grupo de botones de radio para lograr esto. A menudo utiliza una etiqueta de legend para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento fieldset . -El fieldset y la etiqueta de legend no son necesarios cuando las opciones son autoexplicativas, como una selección de género. Usando una label con el for atributo para cada botón de radio es suficiente. -Aquí hay un ejemplo: -
<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>
-
+
El siguiente tema de formulario cubre la accesibilidad de los botones de radio. A cada opción se le asigna una label con un atributo for vincula con el id del elemento correspondiente tal como se describe en el último desafío. Dado que los botones de radio a menudo vienen en un grupo donde el usuario debe elegir uno, hay una manera de mostrar semánticamente que las opciones son parte de un conjunto. La etiqueta fieldset rodea todo el grupo de botones de radio para lograr esto. A menudo utiliza una etiqueta de legend para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento fieldset . El fieldset y la etiqueta de legend no son necesarios cuando las opciones se explican por sí mismas, como una selección de género. Usando una label con el for atributo para cada botón de radio es suficiente. Aquí hay un ejemplo:
<form>
<fieldset>
<legend> Elija uno de estos tres elementos: </legend>
<input id = "one" type = "radio" name = "items" value = "one">
<label for = "one"> Choice One </label> <br>
<input id = "two" type = "radio" name = "items" value = "two">
<label for = "two"> Choice Two </label> <br>
<input id = "three" type = "radio" name = "items" value = "three">
<label for = "three"> Choice Three </label>
</fieldset>
</form>
## Instructions -
-Camper Cat desea información sobre el nivel de ninja de sus usuarios cuando se registran en su lista de correo electrónico. Ha añadido un conjunto de botones de radio, y aprendió de la lección anterior para utilizar etiquetas de la etiqueta con la for atributos para cada elección. ¡Ve el gato campista! Sin embargo, su código todavía necesita ayuda. Cambie la etiqueta div rodea a los botones de fieldset una etiqueta de conjunto de fieldset y cambie la etiqueta p dentro de una legend . -
+
Camper Cat desea información sobre el nivel de ninja de sus usuarios cuando se registran en su lista de correo electrónico. Ha añadido un conjunto de botones de radio, y aprendió de la lección anterior para utilizar etiquetas de la etiqueta con la for atributos para cada elección. ¡Ve el gato campista! Sin embargo, su código todavía necesita ayuda. Cambie la etiqueta div rodea a los botones de fieldset una etiqueta de conjunto de fieldset y cambie la etiqueta p dentro de una legend .
## Tests
@@ -89,6 +81,7 @@ tests:
© 2018 Camper Cat
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.spanish.md index 2e80c0d77c..2bf5257f0d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.spanish.md @@ -1,23 +1,16 @@ --- id: 587d781b367417b2b2512abe title: Add a box-shadow to a Card-like Element -localeTitle: Agregar una sombra de cuadro a un elemento similar a una tarjeta challengeType: 0 videoUrl: '' +localeTitle: Agregar una sombra de cuadro a un elemento similar a una tarjeta --- ## Description -
-La propiedad box-shadow aplica una o más sombras a un elemento. -La propiedad box-shadow toma valores para offset-x (la distancia para empujar la sombra horizontalmente desde el elemento), offset-y (la distancia para empujar la sombra verticalmente desde el elemento), blur-radius , spread-radius y a Valor del color, en ese orden. Los valores de spread-radius blur-radius spread-radius son opcionales. -Aquí hay un ejemplo del CSS para crear múltiples sombras con un poco de desenfoque, en su mayoría en colores negros transparentes: -
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
-
+
La propiedad box-shadow aplica una o más sombras a un elemento. La propiedad box-shadow toma valores para offset-x (la distancia para empujar la sombra horizontalmente desde el elemento), offset-y (la distancia para empujar la sombra verticalmente desde el elemento), blur-radius spread-radius y un color. Valor, en ese orden. Los valores de spread-radius blur-radius spread-radius son opcionales. Este es un ejemplo del CSS para crear múltiples sombras con un poco de desenfoque, en su mayoría en colores negros transparentes:
box-shadow: 0 10px 20px rgba (0,0,0,0.19), 0 6px 6px rgba (0,0,0,0.23);
## Instructions -
-El elemento ahora tiene un ID de thumbnail . Con este selector, use los valores de CSS de ejemplo anteriores para colocar una box-shadow en la tarjeta. -
+
El elemento ahora tiene un id de thumbnail . Con este selector, use los valores de CSS de ejemplo anteriores para colocar una box-shadow en la tarjeta.
## Tests
@@ -83,6 +76,7 @@ tests: + ``` @@ -94,9 +88,7 @@ tests: ## Solution
- ```js -var code = "#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md index fea027dfd6..9d56e47e5f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.spanish.md @@ -1,24 +1,16 @@ --- id: 587d781b367417b2b2512abc title: Adjust the background-color Property of Text -localeTitle: Ajustar la propiedad de texto de color de fondo challengeType: 0 videoUrl: '' +localeTitle: Ajustar la propiedad de texto de color de fondo --- ## Description -
-En lugar de ajustar el fondo general o el color del texto para que el primer plano sea fácil de leer, puede agregar un background-color al elemento que contiene el texto que desea enfatizar. Este desafío utiliza rgba() lugar de códigos hex o rgb() normal. -
rgba stands for:
  r = red
  g = green
  b = blue
  a = alpha/level of opacity
-Los valores RGB pueden variar de 0 a 255. El valor alfa puede variar de 1, que es totalmente opaco o de color sólido, a 0, que es completamente transparente o claro. rgba() es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo. -background-color: rgba(45, 45, 45, 0.1) para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1. -
+
En lugar de ajustar el fondo general o el color del texto para que el primer plano sea fácil de leer, puede agregar un background-color al elemento que contiene el texto que desea enfatizar. Este desafío utiliza rgba() lugar de códigos hex o rgb() normal.
rgba significa:
r = rojo
g = verde
b = azul
a = alfa / nivel de opacidad
Los valores RGB pueden variar de 0 a 255. El valor alfa puede variar de 1, que es totalmente opaco o de color sólido, a 0, que es totalmente transparente o claro. rgba() es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo. background-color: rgba(45, 45, 45, 0.1) para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1.
## Instructions -
-Para hacer que el texto destaque más, ajuste el background-color de background-color del elemento h4 al valor rgba() dado. -También para el h4 , elimine la propiedad de height y agregue padding de 10px. -
+
Para hacer que el texto destaque más, ajuste el background-color de background-color del elemento h4 al valor rgba() dado. También para el h4 , elimine la propiedad de height y agregue padding de 10px.
## Tests
@@ -83,6 +75,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md index 1e43dcaf48..759ec2829c 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.spanish.md @@ -1,33 +1,29 @@ --- id: 587d78a4367417b2b2512ad3 title: Adjust the Color of Various Elements to Complementary Colors -localeTitle: Ajustar el color de varios elementos a colores complementarios challengeType: 0 videoUrl: '' +localeTitle: Ajustar el color de varios elementos a colores complementarios --- ## Description -
-El desafío de los colores complementarios mostró que los colores opuestos en la rueda de colores pueden hacer que cada uno se vea más vibrante cuando se colocan lado a lado. Sin embargo, el fuerte contraste visual puede ser discordante si se usa en exceso en un sitio web, y algunas veces puede hacer que el texto sea más difícil de leer si se coloca sobre un fondo de color complementario. En la práctica, uno de los colores suele ser dominante y el complemento se utiliza para atraer la atención visual a cierto contenido de la página. -
+
El desafío de los colores complementarios demostró que los colores opuestos en la rueda de colores pueden hacer que cada uno parezca más vibrante cuando se colocan uno al lado del otro. Sin embargo, el fuerte contraste visual puede ser discordante si se usa en exceso en un sitio web, y algunas veces puede hacer que el texto sea más difícil de leer si se coloca sobre un fondo de color complementario. En la práctica, uno de los colores suele ser dominante y el complemento se utiliza para atraer la atención visual a cierto contenido de la página.
## Instructions -
-Esta página utilizará un tono de verde azulado ( #09A7A1 ) como color dominante, y su complemento naranja ( #FF790E ) para resaltar visualmente los botones de #FF790E . Cambie el background-color de background-color del header y del footer de footer de negro al color verde azulado. Luego cambia el color texto h2 a teal también. Finalmente, cambie el background-color de background-color del button al color naranja. -
+
Esta página utilizará un tono de verde azulado ( #09A7A1 ) como color dominante, y su complemento naranja ( #FF790E ) para resaltar visualmente los botones de #FF790E . Cambie el background-color de background-color del header y del footer de footer de negro al color verde azulado. Luego cambia el color texto h2 a teal también. Finalmente, cambie el background-color de background-color del button al color naranja.
## Tests
```yml tests: - - text: 'El elemento del header debe tener un background-color de background-color de # 09A7A1.' + - text: 'El elemento de header debe tener un background-color de background-color de # 09A7A1.' testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The header element should have a background-color of #09A7A1.");' - text: 'El elemento de footer debe tener un background-color de background-color de # 09A7A1.' testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The footer element should have a background-color of #09A7A1.");' - text: 'El elemento h2 debe tener un color de # 09A7A1.' testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The h2 element should have a color of #09A7A1.");' - - text: 'El elemento del button debe tener un background-color de background-color de # FF790E.' + - text: 'El elemento de button debe tener un background-color de background-color de # FF790E.' testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The button element should have a background-color of #FF790E.");' ``` @@ -78,6 +74,7 @@ tests:
© 2018 FCC Kitchen
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.spanish.md index 452230c263..5109899cf3 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.spanish.md @@ -1,21 +1,16 @@ --- id: 587d7791367417b2b2512ab5 title: Adjust the Height of an Element Using the height Property -localeTitle: Ajustar la altura de un elemento usando la propiedad height challengeType: 0 videoUrl: '' +localeTitle: Ajustar la altura de un elemento usando la propiedad height --- ## Description -
-Puede especificar la altura de un elemento utilizando la propiedad de height en CSS, similar a la propiedad de width . Aquí hay un ejemplo que cambia la altura de una imagen a 20px: -
img {
  height: 20px;
}
-
+
Puede especificar la altura de un elemento utilizando la propiedad de height en CSS, similar a la propiedad de width . Aquí hay un ejemplo que cambia la altura de una imagen a 20px:
img {
altura: 20px;
}
## Instructions -
-Agregue una propiedad de height a la etiqueta h4 y configúrela a 25px. -
+
Agregue una propiedad de height a la etiqueta h4 y configúrela a 25px.
## Tests
@@ -70,6 +65,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md index 0c4c4a85d4..588983c713 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.spanish.md @@ -1,29 +1,23 @@ --- id: 587d781d367417b2b2512ac8 title: Adjust the Hover State of an Anchor Tag -localeTitle: Ajustar el estado de desplazamiento de una etiqueta de anclaje challengeType: 0 videoUrl: '' +localeTitle: Ajustar el estado de desplazamiento de una etiqueta de anclaje --- ## Description -
-Este reto tocará el uso de pseudo-clases. Una pseudo-clase es una palabra clave que se puede agregar a los selectores para seleccionar un estado específico del elemento. -Por ejemplo, el estilo de una etiqueta de anclaje se puede cambiar para su estado de activación mediante el uso del selector de pseudo-clase :hover . Aquí está el CSS para cambiar el color de la etiqueta de anclaje a rojo durante su estado de desplazamiento: -
a:hover {
  color: red;
}
-
+
Este desafío tocará el uso de pseudo-clases. Una pseudo-clase es una palabra clave que se puede agregar a los selectores para seleccionar un estado específico del elemento. Por ejemplo, el estilo de una etiqueta de anclaje se puede cambiar para su estado de desplazamiento mediante el selector de pseudo-clase :hover . Aquí está el CSS para cambiar el color de la etiqueta de anclaje a rojo durante su estado de desplazamiento:
a: flotar {
color rojo;
}
## Instructions -
-El editor de código tiene una regla CSS para el estilo de todo a negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la a etiqueta, el color es de color azul. -
+
El editor de código tiene una regla CSS para el estilo de todo a negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la a etiqueta, el color es de color azul.
## Tests
```yml tests: - - text: 'El color etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el :hover estado de :hover ' + - text: 'El color etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el estado :hover .' testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag color should remain black, only add CSS rules for the :hover state.");' - text: La etiqueta de anclaje debe tener un color azul en el hover. testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a color of blue on hover.");' @@ -47,6 +41,7 @@ tests: CatPhotoApp + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.spanish.md index 4c8f06b684..edd20624a7 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.spanish.md @@ -1,25 +1,16 @@ --- id: 587d78a4367417b2b2512ad4 title: Adjust the Hue of a Color -localeTitle: Ajustar el tono de un color challengeType: 0 videoUrl: '' +localeTitle: Ajustar el tono de un color --- ## Description -
-colores tienen varias características que incluyen matiz, saturación y luminosidad. CSS3 introdujo la propiedad hsl() como una forma alternativa de elegir un color al establecer directamente estas características. -Hue es lo que la gente generalmente considera como 'color'. Si imaginas un espectro de colores comenzando con rojo a la izquierda, moviéndote a través de verde en el medio y azul a la derecha, el tono es donde un color se ajusta a lo largo de esta línea. En hsl() , el tono utiliza un concepto de rueda de color en lugar del espectro, donde el ángulo del color en el círculo se da como un valor entre 0 y 360. -Saturación es la cantidad de gris en un color. Un color completamente saturado no tiene gris, y un color mínimamente saturado es casi completamente gris. Esto se da como un porcentaje con 100% completamente saturado. -luminosidad es la cantidad de blanco o negro en un color. Se da un porcentaje que va del 0% (negro) al 100% (blanco), donde el 50% es el color normal. -Aquí hay algunos ejemplos de hsl() usar hsl() con colores de luminosidad normal completamente saturados: -
Color HSL
rojo hsl (0, 100%, 50%)
amarillo hsl (60, 100%, 50%)
verde hsl (120, 100%, 50%)
cian hsl (180, 100%, 50%)
azul hsl (240, 100%, 50%)
magenta hsl (300, 100%, 50%)
-
+
Los colores tienen varias características que incluyen matiz, saturación y luminosidad. CSS3 introdujo la propiedad hsl() como una forma alternativa de elegir un color al establecer directamente estas características. Hue es lo que la gente generalmente considera como "color". Si imaginas un espectro de colores comenzando con rojo a la izquierda, moviéndote a través de verde en el medio y azul a la derecha, el tono es donde un color se ajusta a lo largo de esta línea. En hsl() , el tono utiliza un concepto de rueda de color en lugar del espectro, donde el ángulo del color en el círculo se da como un valor entre 0 y 360. La saturación es la cantidad de gris en un color. Un color completamente saturado no tiene gris, y un color mínimamente saturado es casi completamente gris. Esto se da como un porcentaje con 100% completamente saturado. La luminosidad es la cantidad de blanco o negro en un color. Se da un porcentaje que va del 0% (negro) al 100% (blanco), donde el 50% es el color normal. Aquí hay algunos ejemplos de hsl() usar hsl() con colores de luminosidad normal completamente saturados:
Color HSL
rojo hsl (0, 100%, 50%)
amarillo hsl (60, 100%, 50%)
verde hsl (120, 100%, 50%)
cian hsl (180, 100%, 50%)
azul hsl (240, 100%, 50%)
magenta hsl (300, 100%, 50%)
## Instructions -
-Cambie el background-color de background-color de cada elemento div función de los nombres de clase ( green , cyan o blue ) usando hsl() . Los tres deben tener saturación completa y luminosidad normal. -
+
Cambie el background-color de background-color de cada elemento div función de los nombres de clase ( green , cyan o blue ) usando hsl() . Los tres deben tener saturación completa y luminosidad normal.
## Tests
@@ -76,6 +67,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.spanish.md index a494f5c19f..666969bb44 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-header-versus-a-paragraph-tag.spanish.md @@ -1,20 +1,16 @@ --- id: 587d781b367417b2b2512abd title: Adjust the Size of a Header Versus a Paragraph Tag -localeTitle: Ajustar el tamaño de un encabezado frente a una etiqueta de párrafo challengeType: 0 videoUrl: '' +localeTitle: Ajustar el tamaño de un encabezado frente a una etiqueta de párrafo --- ## Description -
-El tamaño de fuente de las etiquetas de encabezado ( h1 a h6 ) generalmente debe ser mayor que el tamaño de fuente de las etiquetas de párrafo. Esto hace que sea más fácil para el usuario entender visualmente el diseño y el nivel de importancia de todo en la página. Utiliza la propiedad de font-size para ajustar el tamaño del texto en un elemento. -
+
El tamaño de fuente de las etiquetas de encabezado ( h1 a h6 ) generalmente debe ser mayor que el tamaño de fuente de las etiquetas de párrafo. Esto hace que sea más fácil para el usuario entender visualmente el diseño y el nivel de importancia de todo en la página. Utiliza la propiedad de font-size para ajustar el tamaño del texto en un elemento.
## Instructions -
-Para hacer que el encabezado sea significativamente más grande que el párrafo, cambie el font-size de font-size de la etiqueta h4 a 27 píxeles. -
+
Para hacer que el encabezado sea significativamente más grande que el párrafo, cambie el font-size de font-size de la etiqueta h4 a 27 píxeles.
## Tests
@@ -75,6 +71,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.spanish.md index 704b9e70f9..c6aa931297 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.spanish.md @@ -1,20 +1,16 @@ --- id: 587d78a4367417b2b2512ad5 title: Adjust the Tone of a Color -localeTitle: Ajustar el tono de un color challengeType: 0 videoUrl: '' +localeTitle: Ajustar el tono de un color --- ## Description -
-La opción hsl() en CSS también facilita el ajuste del tono de un color. Mezclar el blanco con un tono puro crea un tinte de ese color, y agregar negro creará un tono. Alternativamente, se produce un tono agregando gris o teñiendo y sombreando. Recuerde que la 's' y la 'l' de hsl() representan la saturación y la luminosidad, respectivamente. El porcentaje de saturación cambia la cantidad de gris y el porcentaje de luminosidad determina la cantidad de blanco o negro que hay en el color. Esto es útil cuando tienes un tono base que te gusta, pero necesitas diferentes variaciones de él. -
+
La opción hsl() en CSS también facilita el ajuste del tono de un color. Mezclar el blanco con un tono puro crea un tinte de ese color, y agregar negro creará un tono. Alternativamente, se produce un tono agregando gris o teñiendo y sombreando. Recuerde que la 's' y la 'l' de hsl() representan la saturación y la luminosidad, respectivamente. El porcentaje de saturación cambia la cantidad de gris y el porcentaje de luminosidad determina la cantidad de blanco o negro que hay en el color. Esto es útil cuando tienes un tono base que te gusta, pero necesitas diferentes variaciones de él.
## Instructions -
-La barra de navegación en este sitio actualmente hereda su background-color de background-color del elemento del header . Comenzando con ese color como base, agregue un background-color al elemento de nav para que use el mismo tono cian, pero tiene 80% de saturación y 25% de luminosidad para cambiar su tono y tono. -
+
La barra de navegación en este sitio actualmente hereda su background-color de background-color del elemento del header . Comenzando con ese color como base, agregue un background-color al elemento de nav para que use el mismo tono cian, pero tiene 80% de saturación y 25% de luminosidad para cambiar su tono y tono.
## Tests
@@ -75,6 +71,7 @@ tests: + ``` @@ -86,9 +83,7 @@ tests: ## Solution
- ```js -var code = "nav {background-color: hsl(180, 80%, 25%);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.spanish.md index 9081e47768..bf5564750a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.spanish.md @@ -1,21 +1,16 @@ --- id: 587d7791367417b2b2512ab4 title: Adjust the Width of an Element Using the width Property -localeTitle: Ajustar el ancho de un elemento usando la propiedad width challengeType: 0 videoUrl: '' +localeTitle: Ajustar el ancho de un elemento usando la propiedad width --- ## Description -
-Puede especificar el ancho de un elemento utilizando la propiedad width en CSS. Los valores se pueden dar en unidades de longitud relativa (como em), unidades de longitud absoluta (como px) o como un porcentaje de su elemento principal que contiene. Aquí hay un ejemplo que cambia el ancho de una imagen a 220px: -
img {
  width: 220px;
}
-
+
Puede especificar el ancho de un elemento utilizando la propiedad width en CSS. Los valores se pueden dar en unidades de longitud relativa (como em), unidades de longitud absoluta (como px) o como un porcentaje de su elemento principal que contiene. Aquí hay un ejemplo que cambia el ancho de una imagen a 220px:
img {
ancho: 220px;
}
## Instructions -
-Agregue una propiedad de width a toda la tarjeta y establézcala en un valor absoluto de 245px. Usa la clase fullCard para seleccionar el elemento. -
+
Agregue una propiedad de width a toda la tarjeta y establézcala en un valor absoluto de 245px. Usa la clase fullCard para seleccionar el elemento.
## Tests
@@ -69,6 +64,7 @@ tests: + ``` @@ -80,9 +76,7 @@ tests: ## Solution
- ```js -var code = ".fullCard {\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.spanish.md index d8a63f1f4d..8102e2d664 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.spanish.md @@ -1,21 +1,16 @@ --- id: 587d78a8367417b2b2512ae5 title: Animate Elements at Variable Rates -localeTitle: Animar elementos a tasas variables challengeType: 0 videoUrl: '' +localeTitle: Animar elementos a tasas variables --- ## Description -
-Hay una variedad de formas de alterar las tasas de animación de elementos animados similares. Hasta ahora, esto se ha logrado mediante la aplicación de una propiedad de animation-iteration-count y la configuración de reglas de @keyframes . -Para ilustrar, la animación de la derecha consta de dos "estrellas" que disminuyen de tamaño y opacidad en la marca del 20% en la regla @keyframes , que crea la animación de @keyframes . Puede cambiar la regla @keyframes para uno de los elementos para que las estrellas parpadeen a diferentes velocidades. -
+
Hay una variedad de formas de alterar las tasas de animación de elementos animados similares. Hasta ahora, esto se ha logrado mediante la aplicación de una propiedad de animation-iteration-count y la configuración de reglas de @keyframes . Para ilustrar, la animación de la derecha consta de dos "estrellas" que disminuyen de tamaño y opacidad en la marca del 20% en la regla @keyframes , que crea la animación de @keyframes . Puede cambiar la regla @keyframes para uno de los elementos para que las estrellas parpadeen a diferentes velocidades.
## Instructions -
-Modifique la tasa de animación del elemento con el nombre de clase de star-1 cambiando su regla @keyframes al 50%. -
+
Modifique la tasa de animación del elemento con el nombre de clase de star-1 cambiando su regla @keyframes al 50%.
## Tests
@@ -87,6 +82,7 @@ tests:
+ ``` @@ -98,9 +94,7 @@ tests: ## Solution
- ```js -var code = "@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.spanish.md index d1ffefdcf2..2f226927da 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.spanish.md @@ -1,22 +1,16 @@ --- id: 587d78a8367417b2b2512ae3 title: Animate Elements Continually Using an Infinite Animation Count -localeTitle: Animar elementos continuamente utilizando un recuento de animaciones infinitas challengeType: 0 videoUrl: '' +localeTitle: Animar elementos continuamente utilizando un recuento de animaciones infinitas --- ## Description -
-Los desafíos anteriores cubrían cómo usar algunas de las propiedades de animación y la regla @keyframes . Otra propiedad de la animation-iteration-count es la animation-iteration-count , que le permite controlar cuántas veces le gustaría recorrer la animación. Aquí hay un ejemplo: -animation-iteration-count: 3; -En este caso, la animación se detendrá después de ejecutarse 3 veces, pero es posible hacer que la animación se ejecute continuamente estableciendo ese valor en infinito. -
+
Los desafíos anteriores cubrían cómo usar algunas de las propiedades de animación y la regla @keyframes . Otra propiedad de la animation-iteration-count es la animation-iteration-count , que le permite controlar cuántas veces le gustaría recorrer la animación. Aquí hay un ejemplo: animation-iteration-count: 3; En este caso, la animación se detendrá después de ejecutarse 3 veces, pero es posible hacer que la animación se ejecute continuamente estableciendo ese valor en infinito.
## Instructions -
-Para mantener la bola rebotando a la derecha en un bucle continuo, cambie la propiedad de animation-iteration-count a infinito. -
+
Para mantener la bola rebotando a la derecha en un bucle continuo, cambie la propiedad de animation-iteration-count a infinito.
## Tests
@@ -69,6 +63,7 @@ tests: }
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.spanish.md index 86f6768e58..c343fca53a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.spanish.md @@ -1,21 +1,16 @@ --- id: 587d78a8367417b2b2512ae6 title: Animate Multiple Elements at Variable Rates -localeTitle: Animar múltiples elementos a tasas variables challengeType: 0 videoUrl: '' +localeTitle: Animar múltiples elementos a tasas variables --- ## Description -
-En el desafío anterior, cambiaste las tasas de animación para dos elementos animados similares al modificar sus reglas @keyframes . Puede lograr el mismo objetivo manipulando la animation-duration de la animation-duration de varios elementos. -En la animación que se ejecuta en el editor de código, hay tres "estrellas" en el cielo que brillan al mismo ritmo en un bucle continuo. Para hacerlos brillar a diferentes velocidades, puede establecer la propiedad de animation-duration la animation-duration en diferentes valores para cada elemento. -
+
En el desafío anterior, cambiaste las tasas de animación para dos elementos animados similares al modificar sus reglas de @keyframes . Puede lograr el mismo objetivo manipulando la animation-duration de la animation-duration de varios elementos. En la animación que se ejecuta en el editor de código, hay tres "estrellas" en el cielo que brillan al mismo ritmo en un bucle continuo. Para hacerlos brillar a diferentes velocidades, puede establecer la propiedad de animation-duration la animation-duration en diferentes valores para cada elemento.
## Instructions -
-Establezca la animation-duration de la animation-duration de los elementos con las clases star-1 , star-2 y star-3 en 1s, 0.9s y 1.1s, respectivamente. -
+
Establezca la animation-duration de la animation-duration de los elementos con las clases star-1 , star-2 y star-3 en 1s, 0.9s y 1.1s, respectivamente.
## Tests
@@ -92,6 +87,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.spanish.md index 9822a1c00d..367ae7a840 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.spanish.md @@ -1,21 +1,16 @@ --- id: 587d78a3367417b2b2512ad0 title: Center an Element Horizontally Using the margin Property -localeTitle: Centrar un elemento horizontalmente usando la propiedad de margen challengeType: 0 videoUrl: '' +localeTitle: Centrar un elemento horizontalmente usando la propiedad de margen --- ## Description -
-Otra técnica de posicionamiento es centrar un elemento de bloque horizontalmente. Una forma de hacerlo es establecer su margin en un valor de auto. -Este método también funciona para imágenes. Las imágenes son elementos en línea de forma predeterminada, pero se pueden cambiar a elementos de bloque cuando configura la propiedad de display para bloquear. -
+
Otra técnica de posicionamiento es centrar un elemento de bloque horizontalmente. Una forma de hacerlo es establecer su margin en un valor de auto. Este método también funciona para imágenes. Las imágenes son elementos en línea de forma predeterminada, pero se pueden cambiar a elementos de bloque cuando configura la propiedad de display para bloquear.
## Instructions -
-Centre el div en la página agregando una propiedad de margin con un valor de auto. -
+
Centre el div en la página agregando una propiedad de margin con un valor de auto.
## Tests
@@ -44,6 +39,7 @@ tests: }
+ ``` @@ -55,9 +51,7 @@ tests: ## Solution
- ```js -var code = "div {background-color: blue; height: 100px; width: 100px; margin: auto;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.spanish.md index f2754e8c98..1d1db0f740 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.spanish.md @@ -1,24 +1,16 @@ --- id: 587d781e367417b2b2512ac9 title: Change an Element's Relative Position -localeTitle: Cambiar la posición relativa de un elemento challengeType: 0 videoUrl: '' +localeTitle: Cambiar la posición relativa de un elemento --- ## Description -
-CSS trata cada elemento HTML como su propia caja, lo que generalmente se conoce como el CSS Box Model . Los elementos de nivel de bloque se inician automáticamente en una nueva línea (piense en encabezados, párrafos y divs) mientras que los elementos en línea se ubican dentro del contenido que lo rodea (como imágenes o tramos). El diseño predeterminado de los elementos de esta manera se denomina normal flow de un documento, pero CSS ofrece la propiedad de posición para anularlo. -Cuando la posición de un elemento se establece en relative , le permite especificar cómo CSS debe moverlo en relación con su posición actual en el flujo normal de la página. Se empareja con las propiedades de desplazamiento de CSS de left o right , y de top o bottom . Estos dicen cuántos píxeles, porcentajes o ems para mover el elemento lejos de donde normalmente se coloca. El siguiente ejemplo aleja el párrafo 10 píxeles de la parte inferior: -
p {
  position: relative;
  bottom: 10px;
}
-Cambiar la posición de un elemento a relativa no lo elimina del flujo normal; otros elementos a su alrededor todavía se comportan como si ese elemento estuviera en su posición predeterminada. -Nota
El posicionamiento le brinda mucha flexibilidad y poder sobre el diseño visual de una página. Es bueno recordar que no importa la posición de los elementos, el marcado HTML subyacente debe estar organizado y tener sentido cuando se lee de arriba a abajo. Así es como los usuarios con discapacidades visuales (que dependen de dispositivos de asistencia como lectores de pantalla) acceden a su contenido. -
+
CSS trata cada elemento HTML como su propia caja, que generalmente se conoce como el CSS Box Model . Los elementos de nivel de bloque se inician automáticamente en una nueva línea (piense en encabezados, párrafos y divs) mientras que los elementos en línea se ubican dentro del contenido que lo rodea (como imágenes o tramos). El diseño predeterminado de los elementos de esta manera se denomina normal flow de un documento, pero CSS ofrece la propiedad de posición para anularlo. Cuando la posición de un elemento se establece en relative , le permite especificar cómo CSS debe moverlo en relación con su posición actual en el flujo normal de la página. Se empareja con las propiedades de desplazamiento de CSS de left o right , y de top o bottom . Estos dicen cuántos píxeles, porcentajes o ems para mover el elemento lejos de donde normalmente se coloca. El siguiente ejemplo aleja el párrafo 10 píxeles de la parte inferior:
pag {
posición: relativa;
abajo: 10px;
}
Cambiar la posición de un elemento a relativa no lo elimina del flujo normal; otros elementos a su alrededor todavía se comportan como si ese elemento estuviera en su posición predeterminada. Nota
El posicionamiento le brinda mucha flexibilidad y poder sobre el diseño visual de una página. Es bueno recordar que no importa la posición de los elementos, el marcado HTML subyacente debe estar organizado y tener sentido cuando se lee de arriba a abajo. Así es como los usuarios con discapacidades visuales (que dependen de dispositivos de asistencia como lectores de pantalla) acceden a su contenido.
## Instructions -
-Cambie la position del h2 a relative , y use un desplazamiento de CSS para alejarlo 15 píxeles de la top de donde se encuentra en el flujo normal. Observe que no hay impacto en las posiciones de los elementos h1 yp circundantes. -
+
Cambie la position del h2 a relative , y use un desplazamiento de CSS para alejarlo 15 píxeles de la top de donde se encuentra en el flujo normal. Observe que no hay impacto en las posiciones de los elementos h1 yp circundantes.
## Tests
@@ -51,6 +43,7 @@ tests:

Move me!

I still think the h2 is where it normally sits.

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.spanish.md index 7cd703a299..f80731ecc0 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.spanish.md @@ -1,21 +1,16 @@ --- id: 587d78a8367417b2b2512ae7 title: Change Animation Timing with Keywords -localeTitle: Cambiar el tiempo de animación con palabras clave challengeType: 0 videoUrl: '' +localeTitle: Cambiar el tiempo de animación con palabras clave --- ## Description -
-En las animaciones CSS, la propiedad animation-timing-function controla la rapidez con la que un elemento animado cambia a lo largo de la duración de la animación. Si la animación es un automóvil que se mueve del punto A al punto B en un tiempo determinado (la animation-duration su animation-duration ), la animation-timing-function la animation-timing-function dice cómo el automóvil acelera y desacelera en el transcurso del viaje. -Hay una serie de palabras clave predefinidas disponibles para las opciones populares. Por ejemplo, el valor predeterminado es la ease , que comienza lento, se acelera en el medio y luego se ralentiza nuevamente al final. Otras opciones incluyen la ease-out , que es rápida al principio y luego se ralentiza, la ease-in , que es lenta al principio, luego se acelera al final, o linear , que aplica una velocidad de animación constante en todo momento. -
+
En las animaciones CSS, la propiedad animation-timing-function controla la rapidez con la que un elemento animado cambia a lo largo de la duración de la animación. Si la animación es un automóvil que se mueve del punto A al punto B en un tiempo determinado (la animation-duration su animation-duration ), la animation-timing-function la animation-timing-function dice cómo el automóvil acelera y desacelera en el transcurso del viaje. Hay una serie de palabras clave predefinidas disponibles para las opciones populares. Por ejemplo, el valor predeterminado es la ease , que comienza lento, se acelera en el medio y luego se ralentiza nuevamente al final. Otras opciones incluyen la ease-out , que es rápida al principio y luego se ralentiza, la ease-in , que es lenta al principio, luego se acelera al final, o linear , que aplica una velocidad de animación constante en todo momento.
## Instructions -
-Para los elementos con el ID de ball1 y ball2 , añada una animation-timing-function propiedad para cada uno, y establecer #ball1 a linear , y #ball2 a ease-out . Observe la diferencia entre cómo se mueven los elementos durante la animación pero terminan juntos, ya que comparten la misma animation-duration de animation-duration de 2 segundos. -
+
Para los elementos con el ID de ball1 y ball2 , añadir una animation-timing-function propiedad para cada uno, y establecer #ball1 a linear , y #ball2 a ease-out . Observe la diferencia entre cómo se mueven los elementos durante la animación pero terminan juntos, ya que comparten la misma animation-duration de animation-duration de 2 segundos.
## Tests
@@ -76,6 +71,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.spanish.md index 063782066b..e1219d474a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.spanish.md @@ -1,20 +1,16 @@ --- id: 587d78a3367417b2b2512acf title: Change the Position of Overlapping Elements with the z-index Property -localeTitle: Cambie la posición de los elementos superpuestos con la propiedad z-index challengeType: 0 videoUrl: '' +localeTitle: Cambie la posición de los elementos superpuestos con la propiedad z-index --- ## Description -
-Cuando los elementos están posicionados para superponerse, el elemento que aparece más adelante en el marcado HTML aparecerá, de forma predeterminada, en la parte superior de los otros elementos. Sin embargo, la propiedad del z-index puede especificar el orden en que se apilan los elementos uno encima del otro. Debe ser un número entero (es decir, un número entero y no un decimal), y los valores más altos para la propiedad de z-index de un elemento lo mueven más arriba en la pila que aquellos con valores más bajos. -
+
Cuando los elementos están posicionados para superponerse, el elemento que aparece más adelante en el marcado HTML aparecerá, de forma predeterminada, en la parte superior de los otros elementos. Sin embargo, la propiedad del z-index puede especificar el orden en que se apilan los elementos uno encima del otro. Debe ser un número entero (es decir, un número entero y no un decimal), y los valores más altos para la propiedad de z-index de un elemento lo mueven más arriba en la pila que aquellos con valores más bajos.
## Instructions -
-Agregue una propiedad de z-index al elemento con el nombre de la clase de first (el rectángulo rojo) y establézcalo en un valor de 2 para que cubra el otro elemento (rectángulo azul). -
+
Agregue una propiedad de z-index al elemento con el nombre de la clase de first (el rectángulo rojo) y establézcalo en un valor de 2 para que cubra el otro elemento (rectángulo azul).
## Tests
@@ -57,6 +53,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.spanish.md index 9e3f75a62a..dc5aa576bb 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.spanish.md @@ -1,25 +1,16 @@ --- id: 587d78a5367417b2b2512ad6 title: Create a Gradual CSS Linear Gradient -localeTitle: Crear un gradiente lineal gradual de CSS challengeType: 0 videoUrl: '' +localeTitle: Crear un gradiente lineal gradual de CSS --- ## Description -
-aplicación de un color en elementos HTML no se limita a un tono plano. CSS proporciona la capacidad de usar transiciones de color, también conocidas como degradados, en elementos. Se accede a través de la función linear-gradient() la propiedad de background . Aquí está la sintaxis general: -background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); -El primer argumento especifica la dirección a partir de la cual comienza la transición de color: se puede establecer como un grado, donde 90 grados forman un degradado vertical y 45 grados se inclinan como una barra invertida. Los siguientes argumentos especifican el orden de los colores utilizados en el degradado. -Ejemplo: -background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255)); -
+
La aplicación de un color en elementos HTML no se limita a un tono plano. CSS proporciona la capacidad de usar transiciones de color, también conocidas como degradados, en elementos. Se accede a través de la función linear-gradient() la propiedad de background . Aquí está la sintaxis general: background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...); El primer argumento especifica la dirección a partir de la cual comienza la transición de color: se puede establecer como un grado, donde 90 grados forman un degradado vertical y 45 grados se inclinan como una barra invertida. Los siguientes argumentos especifican el orden de los colores utilizados en el degradado. Ejemplo: background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
## Instructions -
-Use un linear-gradient() para el background del elemento div y #CCFFFF desde una dirección de 35 grados para cambiar el color de #CCFFFF a #FFCCCC . -Nota
Si bien hay otras formas de especificar un valor de color, como rgb() o hsl() , use valores hexadecimales para este desafío. -
+
Use un linear-gradient() para el background del elemento div y #CCFFFF desde una dirección de 35 grados para cambiar el color de #CCFFFF a #FFCCCC . Nota
Si bien hay otras formas de especificar un valor de color, como rgb() o hsl() , use valores hexadecimales para este desafío.
## Tests
@@ -52,6 +43,7 @@ tests:
+ ``` @@ -63,9 +55,7 @@ tests: ## Solution
- ```js -var code = "
" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md index bb526888ce..0aaeec0099 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.spanish.md @@ -1,23 +1,16 @@ --- id: 587d78a6367417b2b2512add title: Create a Graphic Using CSS -localeTitle: Crear un gráfico utilizando CSS challengeType: 0 videoUrl: '' +localeTitle: Crear un gráfico utilizando CSS --- ## Description -
-Al manipular diferentes selectores y propiedades, puedes hacer formas interesantes. Uno de los más fáciles de probar es una forma de luna creciente. Para este desafío, necesitas trabajar con la propiedad box-shadow que establece la sombra de un elemento, junto con la propiedad border-radius que controla la redondez de las esquinas del elemento. -Creará un objeto redondo y transparente con una sombra nítida que está ligeramente desplazada hacia el lado: la sombra realmente será la forma de la luna que ve. -Para crear un objeto redondo, la propiedad border-radius debe establecerse en un valor de 50%. -Puede recordar de un desafío anterior que la propiedad box-shadow toma valores para offset-x , offset-y , blur-radius , spread-radius y un valor de color en ese orden. Los valores de spread-radius blur-radius spread-radius son opcionales. -
+
Al manipular diferentes selectores y propiedades, puedes hacer formas interesantes. Uno de los más fáciles de probar es una forma de luna creciente. Para este desafío, necesitas trabajar con la propiedad box-shadow que establece la sombra de un elemento, junto con la propiedad border-radius que controla la redondez de las esquinas del elemento. Creará un objeto redondo y transparente con una sombra nítida que está ligeramente desplazada hacia el lado: la sombra realmente será la forma de la luna que ve. Para crear un objeto redondo, la propiedad border-radius debe establecerse en un valor del 50%. Puede recordar de un desafío anterior que la propiedad box-shadow toma valores para offset-x , offset-y , blur-radius , spread-radius y un valor de color en ese orden. Los valores de spread-radius blur-radius spread-radius son opcionales.
## Instructions -
-Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el background-color a transparente, luego establezca la propiedad de border-radius en 50% para hacer la forma circular. Finalmente, cambie la propiedad box-shadow para establecer offset-x en 25px, offset-y en 10px, blur-radius en 0, spread-radius en 0 y color en azul. -
+
Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el background-color a transparente, luego establezca la propiedad de border-radius en 50% para hacer la forma circular. Finalmente, cambie la propiedad box-shadow para establecer offset-x en 25px, offset-y en 10px, blur-radius en 0, spread-radius en 0 y color en azul.
## Tests
@@ -28,7 +21,7 @@ tests: testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the background-color property should be set to transparent.");' - text: El valor de la propiedad border-radius debe establecer en 50% . testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the border-radius property should be set to 50%.");' - - text: 'El valor de la propiedad box-shadow debe establecerse en 25px para offset-x , 10px para offset-y , 0 para blur-radius de blur-radius , 0 para spread-radius de spread-radius y finalmente azul para el color.' + - text: 'El valor de la propiedad box-shadow debe establecer en 25px para offset-x , 10px para offset-y , 0 para blur-radius , 0 para spread-radius y finalmente azul para el color.' testString: 'assert(code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/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.");' ``` @@ -60,6 +53,7 @@ tests:
+ ``` @@ -71,9 +65,7 @@ tests: ## Solution
- ```js -var code = ".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.spanish.md index ed99a0fd1a..ee2a46ccd9 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.spanish.md @@ -1,21 +1,16 @@ --- id: 587d781b367417b2b2512abb title: Create a Horizontal Line Using the hr Element -localeTitle: Crear una línea horizontal utilizando el elemento hr challengeType: 0 videoUrl: '' +localeTitle: Crear una línea horizontal utilizando el elemento hr --- ## Description -
-Puede usar la etiqueta hr para agregar una línea horizontal a lo ancho del elemento que lo contiene. Esto se puede usar para definir un cambio en el tema o para separar visualmente grupos de contenido. -
+
Puede usar la etiqueta hr para agregar una línea horizontal a través del ancho de su elemento contenedor. Esto se puede usar para definir un cambio en el tema o para separar visualmente grupos de contenido.
## Instructions -
-Agregue una etiqueta de hr debajo de la h4 que contiene el título de la tarjeta. -Nota
En HTML, hr es una etiqueta de cierre automático, y por lo tanto no necesita una etiqueta de cierre separada. -
+
Agregue una etiqueta de hr debajo de la h4 que contiene el título de la tarjeta. Nota
En HTML, hr es una etiqueta de cierre automático, y por lo tanto no necesita una etiqueta de cierre separada.
## Tests
@@ -76,6 +71,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md index 58cc88ee87..9bb8141a16 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.spanish.md @@ -1,25 +1,16 @@ --- id: 587d78a6367417b2b2512ade title: Create a More Complex Shape Using CSS and HTML -localeTitle: Crea una forma más compleja usando CSS y HTML challengeType: 0 videoUrl: '' +localeTitle: Crea una forma más compleja usando CSS y HTML --- ## Description -
-Una de las formas más populares del mundo es la forma de corazón, y en este desafío creará una utilizando CSS puro. Pero primero, debe comprender los elementos pseudoelementos ::before y ::after . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un ::before pseudo-elemento se usa para agregar un rectángulo a un elemento con el heart la clase: -
.heart::before {
  content: "";
  background-color: yellow;
  border-radius: 25%;
  position: absolute;
  height: 50px;
  width: 70px;
  top: -50px;
  left: 5px;
}
-Para que los elementos de pseudo-elementos ::before y ::after funcionen correctamente, deben tener una propiedad de content definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos ::before y ::after se usan para hacer formas, la propiedad de content sigue siendo necesaria, pero se establece en una cadena vacía. -En el ejemplo anterior, el elemento con la clase de heart tiene un pseudoelemento ::before del que produce un rectángulo amarillo con height y width de 50 px y 70 px, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su radio de borde del 25% y está posicionado absolutamente a 5px desde la left y 50px por encima de la top del elemento. -
+
Una de las formas más populares del mundo es la forma de corazón, y en este desafío creará una utilizando CSS puro. Pero primero, debe comprender los elementos pseudoelementos ::before y ::after . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un ::before pseudo-elemento se usa para agregar un rectángulo a un elemento con el heart la clase:
.heart :: before {
contenido: "";
color de fondo: amarillo;
radio del borde: 25%;
posición: absoluta;
altura: 50px;
ancho: 70px;
arriba: -50px;
izquierda: 5px;
}
Para que ::before y ::after pseudo-elements funcionen correctamente, deben tener una propiedad de content definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos ::before y ::after se usan para hacer formas, la propiedad de content sigue siendo necesaria, pero se establece en una cadena vacía. En el ejemplo anterior, el elemento con la clase de heart tiene un pseudoelemento ::before del que produce un rectángulo amarillo con height y width de 50 px y 70 px, respectivamente. Este rectángulo tiene esquinas redondeadas debido a su radio de borde del 25% y está posicionado absolutamente a 5px desde la left y 50px por encima de la top del elemento.
## Instructions -
-Transforma el elemento en la pantalla a un corazón. En el heart::after selector, cambie el background-color a rosa y el border-radius del border-radius a 50%. -A continuación, apunte el elemento con el heart la clase (solo el heart ) y complete la propiedad de transform . Utilice la función rotate() con -45 grados. ( rotate() funciona de la misma manera que skewX() y skewY() hacen). -Finalmente, en el heart::before selector, establece su propiedad de content en una cadena vacía. -
+
Transforma el elemento en la pantalla en un corazón. En el heart::after selector, cambie el background-color a rosa y el border-radius del border-radius a 50%. A continuación, apunte el elemento con el heart la clase (solo el heart ) y complete la propiedad de transform . Utilice la función rotate() con -45 grados. ( rotate() funciona de la misma manera que skewX() y skewY() hacen). Finalmente, en el heart::before selector, establece su propiedad de content en una cadena vacía.
## Tests
@@ -80,6 +71,7 @@ tests: }
+ ``` @@ -91,9 +83,7 @@ tests: ## Solution
- ```js -var code = ".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \"\"; border-radius: 50%;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.spanish.md index b737b5a09b..3d8bfe25a3 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.spanish.md @@ -1,22 +1,16 @@ --- id: 587d78a7367417b2b2512ae1 title: Create Movement Using CSS Animation -localeTitle: Crear movimiento usando la animación CSS challengeType: 0 videoUrl: '' +localeTitle: Crear movimiento usando la animación CSS --- ## Description -
-Cuando los elementos tienen una position específica, como fixed o relative , las propiedades de desplazamiento de CSS right , left , top y bottom se pueden usar en las reglas de animación para crear movimiento. -Como se muestra en el ejemplo a continuación, puede empujar el elemento hacia abajo y luego hacia arriba configurando la propiedad top del 50% fotograma clave a 50px, pero configurándolo en 0px para el primer ( 0% ) y el último ( 100% ) fotograma clave . -
@keyframes rainbow {
  0% {
    background-color: blue;
    top: 0px;
  }
  50% {
    background-color: green;
    top: 50px;
  }
  100% {
    background-color: yellow;
    top: 0px;
  }
}
-
+
Cuando los elementos tienen una position específica, como fixed o relative , las propiedades de desplazamiento de CSS right , left , top y bottom se pueden usar en las reglas de animación para crear movimiento. Como se muestra en el ejemplo a continuación, puede empujar el elemento hacia abajo y luego hacia arriba configurando la propiedad top del fotograma clave del 50% a 50px, pero configurándolo en 0px para el primer fotograma clave ( 0% ) y el último ( 100% ).
@keyframes rainbow {
0% {
color de fondo: azul;
arriba: 0px;
}
50% {
color de fondo: verde;
superior: 50px;
}
100% {
color de fondo: amarillo;
arriba: 0px;
}
}
## Instructions -
-Agrega un movimiento horizontal a la animación div . Usando la propiedad de desplazamiento a la left , agregue a la regla @keyframes para que rainbow comience en 0 píxeles al 0% , se mueva a 25 píxeles al 50% y termine a -25 píxeles al 100% . No reemplace la propiedad top en el editor: la animación debe tener un movimiento vertical y horizontal. -
+
Añade un movimiento horizontal a la animación div . Usando la propiedad de desplazamiento a la left , agregue a la regla @keyframes para que rainbow comience en 0 píxeles al 0% , se mueva a 25 píxeles al 50% y termine a -25 píxeles al 100% . No reemplace la propiedad top en el editor: la animación debe tener un movimiento vertical y horizontal.
## Tests
@@ -75,6 +69,7 @@ tests:
+ ``` @@ -86,9 +81,7 @@ tests: ## Solution
- ```js -var code = "@keyframes rainbow {0% {background-color: blue; top: 0px; left: 0px;} 50% {background-color: green; top: 50px; left: 25px;} 100% {background-color: yellow; top: 0px; left:-25px;}}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.spanish.md index 30f46cfcdc..b4b409d4dd 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.spanish.md @@ -1,20 +1,16 @@ --- id: 587d78a5367417b2b2512ad8 title: Create Texture by Adding a Subtle Pattern as a Background Image -localeTitle: Crear textura agregando un patrón sutil como imagen de fondo challengeType: 0 videoUrl: '' +localeTitle: Crear textura agregando un patrón sutil como imagen de fondo --- ## Description -
-Una forma de agregar textura e interés a un fondo y hacer que se destaque más es agregar un patrón sutil. La clave es el equilibrio, ya que no desea que el fondo se destaque demasiado y quita el primer plano. La propiedad de background compatible con la función url() para enlazar a una imagen de la textura o patrón elegido. La dirección del enlace está entre comillas dentro de los paréntesis. -
+
Una forma de agregar textura e interés a un fondo y hacer que se destaque más es agregar un patrón sutil. La clave es el equilibrio, ya que no desea que el fondo se destaque demasiado y quita el primer plano. La propiedad de background compatible con la función url() para enlazar a una imagen de la textura o patrón elegido. La dirección del enlace está entre comillas dentro de los paréntesis.
## Instructions -
-Usando la url de https://i.imgur.com/MJAkxbh.png , establezca el background de toda la página con el selector de body . -
+
Usando la url de https://i.imgur.com/MJAkxbh.png , establezca el background de toda la página con el selector de body .
## Tests
@@ -39,6 +35,7 @@ tests: } + ``` @@ -50,9 +47,7 @@ tests: ## Solution
- ```js -var code = "body {background: url('https://i.imgur.com/MJAkxbh.png')}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.spanish.md index 9c58a50821..a018983706 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.spanish.md @@ -1,25 +1,16 @@ --- id: 587d7791367417b2b2512ab3 title: Create Visual Balance Using the text-align Property -localeTitle: Crear balance visual usando la propiedad text-align challengeType: 0 videoUrl: '' +localeTitle: Crear balance visual usando la propiedad text-align --- ## Description -
-Esta sección del currículo se enfoca en el Diseño Visual Aplicado. El primer grupo de desafíos se basa en el diseño de la tarjeta dada para mostrar una serie de principios básicos. -texto es a menudo una gran parte del contenido web. CSS tiene varias opciones para alinearlo con la propiedad text-align . -text-align: justify; hace que todas las líneas de texto, excepto la última línea, se encuentren con los bordes izquierdo y derecho del cuadro de línea. -text-align: center; Centra el texto -text-align: right; alinea a la derecha el texto -y alinea el texto text-align: left; (el valor predeterminado) alinea a la izquierda el texto. -
+
Esta sección del currículo se enfoca en el Diseño Visual Aplicado. El primer grupo de desafíos se basa en el diseño de la tarjeta dada para mostrar una serie de principios básicos. El texto es a menudo una gran parte del contenido web. CSS tiene varias opciones para alinearlo con la propiedad text-align . text-align: justify; hace que todas las líneas de texto, excepto la última línea, se encuentren con los bordes izquierdo y derecho del cuadro de línea. text-align: center; Centra el texto text-align: right; alinea a la derecha el texto y alinea el texto text-align: left; (el valor predeterminado) alinea a la izquierda el texto.
## Instructions -
-Alinee el texto de la etiqueta h4 , que dice "Google", al centro. Luego justifique la etiqueta de párrafo que contiene información sobre cómo se fundó Google. -
+
Alinee el texto de la etiqueta h4 , que dice "Google", al centro. Luego justifique la etiqueta de párrafo que contiene información sobre cómo se fundó Google.
## Tests
@@ -74,6 +65,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.spanish.md index 0f4257ed6c..a3c52ceb88 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.spanish.md @@ -1,21 +1,16 @@ --- id: 587d78a7367417b2b2512ae2 title: Create Visual Direction by Fading an Element from Left to Right -localeTitle: Crear dirección visual mediante el desvanecimiento de un elemento de izquierda a derecha challengeType: 0 videoUrl: '' +localeTitle: Crear dirección visual mediante el desvanecimiento de un elemento de izquierda a derecha --- ## Description -
-Para este desafío, cambiará la opacity de un elemento animado para que se desvanezca gradualmente a medida que llega al lado derecho de la pantalla. -En la animación mostrada, el elemento redondo con el fondo degradado se mueve hacia la derecha en la marca del 50% de la animación según la regla @keyframes . -
+
Para este desafío, cambiará la opacity de un elemento animado para que se desvanezca gradualmente a medida que llega al lado derecho de la pantalla. En la animación mostrada, el elemento redondo con el fondo degradado se mueve hacia la derecha en la marca del 50% de la animación según la regla @keyframes .
## Instructions -
-Dirija el elemento con el id de la ball y agregue la propiedad de opacity establecida en 0.1 al 50% , de modo que el elemento se desvanezca a medida que se mueve hacia la derecha. -
+
Apunte el elemento con el id de la ball y agregue la propiedad de opacity establecida en 0.1 al 50% , por lo que el elemento se desvanece a medida que se mueve hacia la derecha.
## Tests
@@ -63,6 +58,7 @@ tests:
+ ``` @@ -74,9 +70,7 @@ tests: ## Solution
- ```js -var code = "@keyframes fade {50% { left: 60%; opacity: 0.1;}}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.spanish.md index ec7f0ef9d8..8e899c01c4 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.spanish.md @@ -1,22 +1,16 @@ --- id: 587d781c367417b2b2512abf title: Decrease the Opacity of an Element -localeTitle: Disminuir la opacidad de un elemento challengeType: 0 videoUrl: '' +localeTitle: Disminuir la opacidad de un elemento --- ## Description -
-La propiedad de opacity en CSS se usa para ajustar la opacidad o, a la inversa, la transparencia de un elemento. -
A value of 1 is opaque, which isn't transparent at all.
A value of 0.5 is half see-through.
A value of 0 is completely transparent.
-El valor dado se aplicará a todo el elemento, ya sea una imagen con alguna transparencia, o los colores de primer plano y de fondo para un bloque de texto. -
+
La propiedad de opacity en CSS se usa para ajustar la opacidad, o por el contrario, la transparencia de un elemento.
Un valor de 1 es opaco, que no es transparente en absoluto.
Un valor de 0.5 es medio transparente.
Un valor de 0 es completamente transparente.
El valor dado se aplicará a todo el elemento, ya sea una imagen con alguna transparencia, o los colores de primer plano y de fondo para un bloque de texto.
## Instructions -
-Establezca la opacity de las etiquetas de anclaje en 0.7 utilizando la clase de links para seleccionarlas. -
+
Establezca la opacity de las etiquetas de anclaje en 0.7 utilizando la clase de links para seleccionarlas.
## Tests
@@ -81,6 +75,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.spanish.md index 524aef557a..4a44838970 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.spanish.md @@ -1,26 +1,16 @@ --- id: 587d78a3367417b2b2512ad1 title: Learn about Complementary Colors -localeTitle: Aprende sobre colores complementarios challengeType: 0 videoUrl: '' +localeTitle: Aprende sobre colores complementarios --- ## Description -
-La teoría del color y su impacto en el diseño es un tema profundo y solo se cubren los aspectos básicos en los siguientes desafíos. En un sitio web, el color puede llamar la atención sobre el contenido, evocar emociones o crear armonía visual. El uso de diferentes combinaciones de colores puede realmente cambiar el aspecto de un sitio web, y se puede pensar mucho en elegir una paleta de colores que funcione con su contenido. -La rueda de colores es una herramienta útil para visualizar cómo se relacionan los colores entre sí: es un círculo donde los tonos similares son vecinos y los diferentes tonos están más separados. Cuando dos colores están opuestos entre sí en la rueda, se denominan colores complementarios. Tienen la característica de que si se combinan, se "cancelan" entre sí y crean un color gris. Sin embargo, cuando se colocan lado a lado, estos colores aparecen más vibrantes y producen un fuerte contraste visual. -Algunos ejemplos de colores complementarios con sus códigos hexadecimales son: -
red (#FF0000) and cyan (#00FFFF)
green (#00FF00) and magenta (#FF00FF)
blue (#0000FF) and yellow (#FFFF00)
-Esto es diferente del modelo de color RYB obsoleto que muchos de nosotros aprendimos en la escuela, que tiene diferentes colores primarios y complementarios. La teoría moderna del color utiliza el modelo RGB aditivo (como en una pantalla de computadora) y el modelo sustractivo CMY (K) (como en la impresión). Lea aquí para más información sobre este tema complejo. -Hay muchas herramientas de selección de colores disponibles en línea que tienen la opción de encontrar el complemento de un color. -Nota
Para todos los desafíos de color: usar color puede ser una forma poderosa de agregar interés visual a una página. Sin embargo, el color solo no debe usarse como la única forma de transmitir información importante porque los usuarios con discapacidades visuales pueden no entender ese contenido. Este problema se tratará con más detalle en los desafíos de accesibilidad aplicada. -
+
La teoría del color y su impacto en el diseño es un tema profundo y solo los aspectos básicos están cubiertos en los siguientes desafíos. En un sitio web, el color puede llamar la atención sobre el contenido, evocar emociones o crear armonía visual. El uso de diferentes combinaciones de colores puede realmente cambiar el aspecto de un sitio web, y se puede pensar mucho en elegir una paleta de colores que funcione con su contenido. La rueda de colores es una herramienta útil para visualizar cómo se relacionan los colores entre sí: es un círculo donde los tonos similares son vecinos y los diferentes tonos están más separados. Cuando dos colores están opuestos entre sí en la rueda, se denominan colores complementarios. Tienen la característica de que si se combinan, se "cancelan" entre sí y crean un color gris. Sin embargo, cuando se colocan lado a lado, estos colores aparecen más vibrantes y producen un fuerte contraste visual. Algunos ejemplos de colores complementarios con sus códigos hexadecimales son:
rojo (# FF0000) y cian (# 00FFFF)
verde (# 00FF00) y magenta (# FF00FF)
azul (# 0000FF) y amarillo (# FFFF00)
Esto es diferente del modelo de color RYB obsoleto que muchos de nosotros aprendimos en la escuela, que tiene diferentes colores primarios y complementarios. La teoría moderna del color utiliza el modelo RGB aditivo (como en una pantalla de computadora) y el modelo sustractivo CMY (K) (como en la impresión). Lea aquí para más información sobre este tema complejo. Hay muchas herramientas de selección de colores disponibles en línea que tienen la opción de encontrar el complemento de un color. Nota
Para todos los desafíos de color: usar color puede ser una forma poderosa de agregar interés visual a una página. Sin embargo, el color solo no debe usarse como la única forma de transmitir información importante porque los usuarios con discapacidades visuales pueden no entender ese contenido. Este problema se tratará con más detalle en los desafíos de accesibilidad aplicada.
## Instructions -
-Cambie la propiedad de background-color de las clases blue y yellow a sus respectivos colores. Observe cómo los colores se ven diferentes uno al lado del otro en comparación con el fondo blanco. -
+
Cambie la propiedad de background-color de las clases blue y yellow a sus respectivos colores. Observe cómo los colores se ven diferentes uno al lado del otro en comparación con el fondo blanco.
## Tests
@@ -60,6 +50,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.spanish.md index b8e5095dfe..23fe60a452 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.spanish.md @@ -1,24 +1,16 @@ --- id: 587d78a4367417b2b2512ad2 title: Learn about Tertiary Colors -localeTitle: Aprende sobre los colores terciarios challengeType: 0 videoUrl: '' +localeTitle: Aprende sobre los colores terciarios --- ## Description -
-Los monitores de computadora y las pantallas de dispositivos crean diferentes colores al combinar cantidades de luz roja, verde y azul. Esto se conoce como el modelo de color aditivo RGB en la teoría moderna del color. Rojo (R), verde (G) y azul (B) se denominan colores primarios. La mezcla de dos colores primarios crea los colores secundarios cian (G + B), magenta (R + B) y amarillo (R + G). Viste estos colores en el desafío de los colores complementarios. Estos colores secundarios resultan ser el complemento del color primario no utilizado en su creación, y son opuestos a ese color primario en la rueda de color. Por ejemplo, el magenta está hecho con rojo y azul, y es el complemento del verde. -Los colores terciarios son el resultado de combinar un color primario con uno de sus vecinos de color secundario. Por ejemplo, el rojo (primario) y el amarillo (secundario) hacen naranja. Esto agrega seis colores más a una rueda de color simple para un total de doce. -Existen varios métodos para seleccionar diferentes colores que dan como resultado una combinación armoniosa en el diseño. Un ejemplo que puede usar colores terciarios se denomina esquema de color de división complementaria. Este esquema comienza con un color base, luego lo combina con los dos colores adyacentes a su complemento. Los tres colores proporcionan un fuerte contraste visual en un diseño, pero son más sutiles que el uso de dos colores complementarios. -Aquí hay tres colores creados usando el esquema de complemento dividido: -
Color Código hexadecimal
naranja # FF7D00
cian # 00FFFF
frambuesa # FF007D
-
+
Los monitores de computadora y las pantallas de dispositivos crean diferentes colores al combinar cantidades de luz roja, verde y azul. Esto se conoce como el modelo de color aditivo RGB en la teoría moderna del color. Rojo (R), verde (G) y azul (B) se denominan colores primarios. La mezcla de dos colores primarios crea los colores secundarios cian (G + B), magenta (R + B) y amarillo (R + G). Viste estos colores en el desafío de los colores complementarios. Estos colores secundarios resultan ser el complemento del color primario no utilizado en su creación, y son opuestos a ese color primario en la rueda de color. Por ejemplo, el magenta está hecho con rojo y azul, y es el complemento del verde. Los colores terciarios son el resultado de combinar un color primario con uno de sus vecinos de color secundario. Por ejemplo, el rojo (primario) y el amarillo (secundario) hacen naranja. Esto agrega seis colores más a una rueda de color simple para un total de doce. Existen varios métodos para seleccionar diferentes colores que dan como resultado una combinación armoniosa en el diseño. Un ejemplo que puede usar colores terciarios se denomina esquema de color de división complementaria. Este esquema comienza con un color base, luego lo combina con los dos colores adyacentes a su complemento. Los tres colores proporcionan un fuerte contraste visual en un diseño, pero son más sutiles que el uso de dos colores complementarios. Aquí hay tres colores creados usando el esquema de complemento dividido:
Color Código hexadecimal
naranja # FF7D00
cian # 00FFFF
frambuesa # FF007D
## Instructions -
-Cambie la propiedad de background-color de las clases de orange , cyan y raspberry a sus respectivos colores. Asegúrese de utilizar los códigos hexadecimales, ya que la naranja y la frambuesa no son nombres de colores reconocidos por el navegador. -
+
Cambie la propiedad de background-color de las clases de orange , cyan y raspberry a sus respectivos colores. Asegúrese de utilizar los códigos hexadecimales, ya que la naranja y la frambuesa no son nombres de colores reconocidos por el navegador.
## Tests
@@ -69,6 +61,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.spanish.md index 40aa145a8b..3865e46c5b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.spanish.md @@ -1,24 +1,16 @@ --- id: 587d78a9367417b2b2512ae8 title: Learn How Bezier Curves Work -localeTitle: Aprende cómo funcionan las curvas Bezier challengeType: 0 videoUrl: '' +localeTitle: Aprende cómo funcionan las curvas Bezier --- ## Description -
-El último desafío presentó la propiedad de la animation-timing-function y algunas palabras clave que cambian la velocidad de una animación a lo largo de su duración. CSS ofrece una opción distinta de las palabras clave que proporciona un control aún más preciso sobre cómo se desarrolla la animación, mediante el uso de curvas de Bezier. -En las animaciones CSS, las curvas Bezier se utilizan con la función cubic-bezier . La forma de la curva representa cómo se desarrolla la animación. La curva vive en un sistema de coordenadas 1 por 1. El eje X de este sistema de coordenadas es la duración de la animación (piense en ello como una escala de tiempo), y el eje Y es el cambio en la animación. -La función cubic-bezier consta de cuatro puntos principales que se ubican en esta cuadrícula 1 por 1: p0 , p1 , p2 y p3 . p0 y p3 están configurados para usted: son los puntos de inicio y final que siempre están ubicados respectivamente en el origen (0, 0) y (1, 1). Establece los valores de x e y para los otros dos puntos, y donde los coloque en la cuadrícula dicta la forma de la curva para que siga la animación. Esto se hace en CSS declarando los valores x e y de los puntos de "anclaje" p1 y p2 en la forma: (x1, y1, x2, y2) . Reuniéndolo todo, aquí hay un ejemplo de una curva Bezier en el código CSS: -animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); -En el ejemplo anterior, los valores x e y son equivalentes para cada punto (x1 = 0.25 = y1 y x2 = 0.2 = y2), que si recuerda de la clase de geometría, da como resultado una línea que se extiende desde el origen hasta el punto ( 1, 1). Esta animación es un cambio lineal de un elemento durante la duración de una animación, y es lo mismo que usar la palabra clave linear . En otras palabras, cambia a una velocidad constante. -
+
El último desafío presentó la propiedad de la animation-timing-function y algunas palabras clave que cambian la velocidad de una animación a lo largo de su duración. CSS ofrece una opción distinta de las palabras clave que proporciona un control aún más preciso sobre cómo se desarrolla la animación, mediante el uso de curvas de Bezier. En las animaciones CSS, las curvas de Bezier se utilizan con la función cubic-bezier . La forma de la curva representa cómo se desarrolla la animación. La curva vive en un sistema de coordenadas 1 por 1. El eje X de este sistema de coordenadas es la duración de la animación (piense en ello como una escala de tiempo), y el eje Y es el cambio en la animación. La función cubic-bezier consta de cuatro puntos principales que se encuentran en esta cuadrícula de 1 por 1: p0 , p1 , p2 y p3 . p0 y p3 están configurados para usted: son los puntos de inicio y final que siempre están ubicados respectivamente en el origen (0, 0) y (1, 1). Establece los valores de x e y para los otros dos puntos, y donde los coloque en la cuadrícula dicta la forma de la curva para que siga la animación. Esto se hace en CSS declarando los valores x e y de los puntos de "anclaje" p1 y p2 en la forma: (x1, y1, x2, y2) . Reuniéndolo todo, aquí hay un ejemplo de una curva Bezier en código CSS: animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); En el ejemplo anterior, los valores de x e y son equivalentes para cada punto (x1 = 0.25 = y1 y x2 = 0.75 = y2), que si recuerda de la clase de geometría, da como resultado una línea que se extiende desde el origen hasta el punto (1 , 1). Esta animación es un cambio lineal de un elemento durante la duración de una animación, y es lo mismo que usar la palabra clave linear . En otras palabras, cambia a una velocidad constante.
## Instructions -
-Para el elemento con el id de ball1 , cambie el valor de la propiedad de animation-timing-function de linear a su valor equivalente cubic-bezier función cubic-bezier . Utilice los valores de puntos dados en el ejemplo anterior. -
+
Para el elemento con el id de ball1 , cambie el valor de la propiedad de animation-timing-function de linear a su valor equivalente cubic-bezier función cubic-bezier . Utilice los valores de puntos dados en el ejemplo anterior.
## Tests
@@ -79,6 +71,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.spanish.md index 3be30747ed..45625535b1 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.spanish.md @@ -1,25 +1,16 @@ --- id: 587d78a7367417b2b2512adf title: Learn How the CSS @keyframes and animation Properties Work -localeTitle: Aprende cómo funcionan las propiedades de @fotografías y animaciones de CSS challengeType: 0 videoUrl: '' +localeTitle: Aprende cómo funcionan las propiedades de @fotografías y animaciones de CSS --- ## Description -
-Para animar un elemento, debe conocer las propiedades de la animación y la regla @keyframes . Las propiedades de la animación controlan el comportamiento de la animación y la regla @keyframes controla lo que sucede durante esa animación. Hay ocho propiedades de animación en total. Este desafío lo mantendrá simple y cubrirá primero los dos más importantes: -animation-name establece el nombre de la animación, que luego es utilizada por @keyframes para indicar a CSS qué reglas van con qué animaciones. -animation-duration establece el período de tiempo para la animación. -@keyframes es cómo especificar exactamente qué sucede dentro de la animación a lo largo de la duración. Esto se hace dando propiedades CSS para "marcos" específicos durante la animación, con porcentajes que van desde 0% a 100%. Si comparas esto con una película, las propiedades de CSS para 0% es cómo se muestra el elemento en la escena inicial. Las propiedades de CSS para el 100% es cómo aparece el elemento al final, justo antes de que salgan los créditos. Luego, CSS aplica la magia para hacer la transición del elemento a lo largo de la duración dada para representar la escena. Aquí hay un ejemplo para ilustrar el uso de @keyframes y las propiedades de la animación: -
#anim {
  animation-name: colorful;
  animation-duration: 3s;
}
@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}
-Para el elemento con el anim ID, el fragmento de código anterior establece la animation-name de colorful y establece la animation-duration de 3 segundos. Luego, la regla @keyframes enlaza con las propiedades de animación con el nombre colorful . Establece el color azul al principio de la animación (0%), que pasará a amarillo al final de la animación (100%). No está limitado solo a las transiciones de principio a fin, puede establecer propiedades para el elemento para cualquier porcentaje entre 0% y 100%. -
+
Para animar un elemento, debe conocer las propiedades de la animación y la regla @keyframes . Las propiedades de la animación controlan el comportamiento de la animación y la regla @keyframes controla lo que sucede durante esa animación. Hay ocho propiedades de animación en total. Este desafío lo mantendrá simple y cubrirá primero los dos más importantes: animation-name establece el nombre de la animación, que luego es utilizada por @keyframes para indicar a CSS qué reglas van con qué animación. animation-duration establece el período de tiempo para la animación. @keyframes es cómo especificar exactamente qué sucede dentro de la animación a lo largo de la duración. Esto se hace dando propiedades CSS para "marcos" específicos durante la animación, con porcentajes que van desde 0% a 100%. Si comparas esto con una película, las propiedades de CSS para 0% es cómo se muestra el elemento en la escena inicial. Las propiedades de CSS para el 100% es cómo aparece el elemento al final, justo antes de que salgan los créditos. Luego, CSS aplica la magia para hacer la transición del elemento a lo largo de la duración dada para representar la escena. Aquí hay un ejemplo para ilustrar el uso de @keyframes y las propiedades de animación:
#anim {
Nombre de la animación: colorido;
animación-duración: 3s;
}
@keyframes colorful {
0% {
color de fondo: azul;
}
100% {
color de fondo: amarillo;
}
}
Para el elemento con el anim identificación, el fragmento de código anterior establece la animation-name de colorful y establece la animation-duration de 3 segundos. Luego, la regla @keyframes enlaza con las propiedades de animación con el nombre colorful . Establece el color azul al principio de la animación (0%), que pasará a amarillo al final de la animación (100%). No está limitado solo a las transiciones de principio a fin, puede establecer propiedades para el elemento para cualquier porcentaje entre 0% y 100%.
## Instructions -
-Cree una animación para el elemento con el id rect , estableciendo el animation-name la animation-name en arco iris y la animation-duration la animation-duration en 4 segundos. A continuación, declare una regla de @keyframes y establezca el background-color al principio de la animación ( 0% ) en azul, la mitad de la animación ( 50% ) en verde y el final de la animación ( 100% ) en amarillo. -
+
Cree una animación para el elemento con el id rect , estableciendo el animation-name la animation-name en arco iris y la animation-duration la animation-duration en 4 segundos. A continuación, declare una regla de @keyframes y establezca el background-color al principio de la animación ( 0% ) en azul, la mitad de la animación ( 50% ) en verde y el final de la animación ( 100% ) en amarillo.
## Tests
@@ -68,6 +59,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md index d88e410360..09e50995f9 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.spanish.md @@ -1,32 +1,27 @@ --- id: 587d781e367417b2b2512acb title: Lock an Element to its Parent with Absolute Positioning -localeTitle: Bloquear un elemento a su padre con posicionamiento absoluto challengeType: 0 videoUrl: '' +localeTitle: Bloquear un elemento a su padre con posicionamiento absoluto --- ## Description -
-La siguiente opción para la propiedad de position CSS es absolute , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición relative , esto elimina el elemento del flujo normal del documento, por lo que los elementos circundantes lo ignoran. Las propiedades de desplazamiento de CSS (superior o inferior e izquierda o derecha) se utilizan para ajustar la posición. -Un matiz con posicionamiento absoluto es que se bloqueará en relación con su antepasado posicionado más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando position: relative; ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada. -
+
La siguiente opción para la propiedad de position CSS es absolute , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición relative , esto elimina el elemento del flujo normal del documento, por lo que los elementos circundantes lo ignoran. Las propiedades de desplazamiento de CSS (superior o inferior e izquierda o derecha) se utilizan para ajustar la posición. Un matiz con posicionamiento absoluto es que se bloqueará en relación con su antepasado posicionado más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando position: relative; ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada.
## Instructions -
-Bloquee el elemento #searchbar en la parte superior derecha de su section principal declarando su position como absolute . Dale las compensaciones top y right de 50 píxeles cada una. -
+
Bloquee el elemento #searchbar en la parte superior derecha de su section principal declarando su position como absolute . Dale las compensaciones top y right de 50 píxeles cada una.
## Tests
```yml tests: - - text: 'El elemento #searchbar debería tener una position establecida en absolute .' + - text: 'El elemento #searchbar debe tener una position establecida en absolute .' testString: 'assert($("#searchbar").css("position") == "absolute", "The #searchbar element should have a position set to absolute.");' - - text: 'Su código debe usar el desplazamiento de CSS top de 50 píxeles en el elemento #searchbar ' + - text: 'Su código debe usar la compensación de CSS top de 50 píxeles en el elemento #searchbar .' testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the top CSS offset of 50 pixels on the #searchbar element.");' - - text: 'Su código debe usar el desplazamiento de CSS right de 50 píxeles en el elemento #searchbar ' + - text: 'Su código debe usar el desplazamiento de CSS right de 50 píxeles en el elemento #searchbar .' testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the right CSS offset of 50 pixels on the #searchbar element.");' ``` @@ -59,6 +54,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md index 5665a5dd16..0415c3e532 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.spanish.md @@ -1,32 +1,27 @@ --- id: 587d781e367417b2b2512acc title: Lock an Element to the Browser Window with Fixed Positioning -localeTitle: Bloquee un elemento en la ventana del navegador con posicionamiento fijo challengeType: 0 videoUrl: '' +localeTitle: Bloquee un elemento en la ventana del navegador con posicionamiento fijo --- ## Description -
-El siguiente esquema de diseño que ofrece CSS es la posición fixed , que es un tipo de posicionamiento absoluto que bloquea un elemento relativo a la ventana del navegador. Similar al posicionamiento absoluto, se usa con las propiedades de desplazamiento de CSS y también elimina el elemento del flujo normal del documento. Otros elementos ya no se "dan cuenta" de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares. -Una diferencia clave entre las posiciones fixed y absolute es que un elemento con una posición fija no se moverá cuando el usuario se desplace. -
+
El siguiente esquema de diseño que ofrece CSS es la posición fixed , que es un tipo de posicionamiento absoluto que bloquea un elemento en relación con la ventana del navegador. Similar al posicionamiento absoluto, se usa con las propiedades de desplazamiento de CSS y también elimina el elemento del flujo normal del documento. Otros elementos ya no se "dan cuenta" de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares. Una diferencia clave entre las posiciones fixed y absolute es que un elemento con una posición fija no se moverá cuando el usuario se desplace.
## Instructions -
-La barra de navegación en el código está etiquetada con un ID de navbar de navbar . Cambie su position a fixed , y desplace 0 píxeles desde la top y 0 píxeles desde la left . Observe el (falta de) impacto en la posición h1 , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado. -
+
La barra de navegación en el código está etiquetada con una identificación de la navbar de navbar . Cambie su position a fixed , y desplace 0 píxeles desde la top y 0 píxeles desde la left . Observe el (falta de) impacto en la posición h1 , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado.
## Tests
```yml tests: - - text: 'El elemento #navbar debería tener una position establecida como fixed .' + - text: 'El elemento #navbar debe tener una position establecida como fixed .' testString: 'assert($("#navbar").css("position") == "fixed", "The #navbar element should have a position set to fixed.");' - - text: 'Su código debe usar el desplazamiento de CSS top de 0 píxeles en el elemento #navbar ' + - text: 'Su código debe usar la compensación de CSS top de 0 píxeles en el elemento #navbar .' testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the top CSS offset of 0 pixels on the #navbar element.");' - - text: 'Tu código debe usar el desplazamiento de CSS left de 0 píxeles en el elemento #navbar ' + - text: 'Su código debe usar el desplazamiento de CSS left de 0 píxeles en el elemento #navbar .' testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the left CSS offset of 0 pixels on the #navbar element.");' ``` @@ -71,6 +66,7 @@ tests:

I shift up when the #navbar is fixed to the browser window.

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.spanish.md index 1209f3c3dc..058aa6073b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.spanish.md @@ -1,21 +1,16 @@ --- id: 587d78a8367417b2b2512ae4 title: Make a CSS Heartbeat using an Infinite Animation Count -localeTitle: Haz un Heartbeat CSS usando un conteo de animaciones infinitas challengeType: 0 videoUrl: '' +localeTitle: Haz un Heartbeat CSS usando un conteo de animaciones infinitas --- ## Description -
-Aquí hay otro ejemplo de animación continua con la propiedad de animation-iteration-count que usa el corazón que diseñó en un desafío anterior. -La animación de un segundo de latido del corazón consta de dos piezas animadas. Los elementos del heart (que incluyen :before y :after piezas) se animan para cambiar el tamaño con la propiedad de transform , y la div fondo se anima para cambiar su color con la propiedad de background . -
+
Aquí hay otro ejemplo de animación continua con la propiedad de animation-iteration-count que usa el corazón que diseñó en un desafío anterior. La animación de un segundo de latido del corazón consta de dos piezas animadas. Los elementos del heart (que incluyen :before y :after piezas) se animan para cambiar el tamaño con la propiedad de transform , y la div fondo se anima para cambiar su color con la propiedad de background .
## Instructions -
-Mantenga el corazón latiendo agregando la propiedad de animation-iteration-count para la clase de back y la clase de heart y estableciendo el valor en infinito. El heart:before y heart:after selectores heart:after no necesitan propiedades de animación. -
+
Mantenga el latido del corazón agregando la propiedad de animation-iteration-count tanto para la clase de back como para la clase del heart y establezca el valor en infinito. El heart:before y heart:after selectores heart:after no necesitan propiedades de animación.
## Tests
@@ -106,6 +101,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md index fa58d77c2f..e0e6f1134f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.spanish.md @@ -1,31 +1,23 @@ --- id: 587d78a9367417b2b2512aea title: Make Motion More Natural Using a Bezier Curve -localeTitle: Haz el movimiento más natural usando una curva Bezier challengeType: 0 videoUrl: '' +localeTitle: Haz el movimiento más natural usando una curva Bezier --- ## Description -
-Este desafío anima un elemento para replicar el movimiento de una bola que se hace malabarismo. Los desafíos anteriores cubrieron las curvas Bezier cúbicas linear y de ease-out desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto. -La animation-timing-function automáticamente en cada fotograma clave cuando el animation-iteration-count se establece en infinito. Dado que hay una regla de fotogramas clave establecida en la mitad de la duración de la animación (al 50% ), produce dos progresiones de animación idénticas en el movimiento ascendente y descendente de la bola. -La siguiente curva de Bezier cúbica simula un movimiento de malabarismo: -cubic-bezier(0.3, 0.4, 0.5, 1.6); -Observe que el valor de y2 es mayor que 1. Aunque la curva de Bézier cúbica se asigna en un sistema de coordenadas 1 por 1, y solo puede aceptar valores de x de 1 a 1, el valor de y se puede configurar en números mayores que uno . Esto resulta en un movimiento de rebote que es ideal para simular la bola de malabarismo. -
+
Este desafío anima un elemento para replicar el movimiento de una bola que se hace malabarismo. Los desafíos anteriores cubrieron las curvas Bezier cúbicas linear y de ease-out desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto. La animation-timing-function automáticamente en cada fotograma clave cuando la cuenta animation-iteration-count se establece en infinito. Dado que hay una regla de fotogramas clave establecida en la mitad de la duración de la animación (al 50% ), produce dos progresiones de animación idénticas en el movimiento ascendente y descendente de la bola. La siguiente curva de Bezier cúbica simula un movimiento de malabarismo: cubic-bezier(0.3, 0.4, 0.5, 1.6); Observe que el valor de y2 es mayor que 1. Aunque la curva de Bézier cúbica se asigna en un sistema de coordenadas 1 por 1, y solo puede aceptar valores de x de 1 a 1, el valor de y se puede configurar en números mayores que uno. Esto resulta en un movimiento de rebote que es ideal para simular la bola de malabarismo.
## Instructions -
-Cambie el valor de la animation-timing-function de animation-timing-function del elemento con el id de green a una función cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649. -
+
Cambie el valor de la animation-timing-function de animation-timing-function del elemento con el id de green a una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649.
## Tests
```yml tests: - - text: 'El valor de la propiedad animation-timing-function para el elemento con el id green debe ser una función de cubic-bezier con los valores de x1, y1, x2, y2 según lo especificado.' + - text: 'El valor de la propiedad de animation-timing-function para el elemento con el id green debe ser una función de cubic-bezier con los valores de x1, y1, x2, y2 según lo especificado.' testString: 'assert($("#green").css("animation-timing-function") == "cubic-bezier(0.311, 0.441, 0.444, 1.649)", "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.' ``` @@ -74,6 +66,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md index fd8da5db03..b39eb0b70d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.spanish.md @@ -1,29 +1,23 @@ --- id: 58a7a6ebf9a6318348e2d5aa title: Modify Fill Mode of an Animation -localeTitle: Modificar el modo de relleno de una animación challengeType: 0 videoUrl: '' +localeTitle: Modificar el modo de relleno de una animación --- ## Description -
-Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido 500ms , lo que hace que el botón vuelva al color original. Desea que el botón quede resaltado. -Esto se puede hacer configurando la propiedad de animation-fill-mode en forwards . La animation-fill-mode especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así: -animation-fill-mode: forwards; -
+
Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido 500ms , lo que hace que el botón vuelva al color original. Desea que el botón quede resaltado. Esto se puede hacer configurando la propiedad de animation-fill-mode en forwards . La animation-fill-mode especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así: animation-fill-mode: forwards;
## Instructions -
-Establezca la propiedad de animation-fill-mode del button:hover hacia forwards para que el botón permanezca resaltado cuando un usuario se desplace sobre él. -
+
Establezca la propiedad de animation-fill-mode del button:hover hacia forwards para que el botón permanezca resaltado cuando un usuario se desplace sobre él.
## Tests
```yml tests: - - text: ' button:hover debería tener una propiedad de animation-fill-mode con un valor de forwards .' + - text: 'button:hover debe tener una propiedad de animation-fill-mode con un valor de forwards .' testString: 'assert(code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi) && code.match(/button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi), "button:hover should have a animation-fill-mode property with a value of forwards.");' ``` @@ -57,6 +51,7 @@ tests: } + ``` @@ -68,9 +63,7 @@ tests: ## Solution
- ```js -var code = "button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md index f5cd413d78..b9880ef800 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.spanish.md @@ -1,28 +1,25 @@ --- id: 587d781e367417b2b2512aca title: Move a Relatively Positioned Element with CSS Offsets -localeTitle: Mueva un elemento de posición relativa con compensaciones de CSS challengeType: 0 videoUrl: '' +localeTitle: Mueva un elemento de posición relativa con compensaciones de CSS --- ## Description -
-Las compensaciones de CSS de la top o bottom , y de la left o la right indican al navegador la distancia a la que se debe desplazar un elemento en relación con el lugar donde se ubicaría en el flujo normal del documento. Está desplazando un elemento lejos de un punto dado, lo que lo aleja del lado al que se hace referencia (efectivamente, en la dirección opuesta). Como viste en el último desafío, usando el desplazamiento superior movió el h2 hacia abajo. Del mismo modo, utilizando un desplazamiento a la izquierda mueve un elemento a la derecha. 0 +
Las compensaciones de CSS de la top o bottom , y de la left o la right indican al navegador la distancia que debe desplazar un elemento en relación con el lugar donde se ubicaría en el flujo normal del documento. Está desplazando un elemento lejos de un punto dado, lo que lo aleja del lado al que se hace referencia (efectivamente, en la dirección opuesta). Como viste en el último desafío, usando el desplazamiento superior movió el h2 hacia abajo. Del mismo modo, utilizando un desplazamiento a la izquierda mueve un elemento a la derecha.

Instrucciones

Use las compensaciones de CSS para mover el h2 15 píxeles a la derecha y 10 píxeles hacia arriba.

Pruebas 

 tests: - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.' testString: 'assert($("h2").css("bottom") == "10px", "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.");' - text: 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.' testString: 'assert($("h2").css("left") == "15px", "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.");'

Semilla de desafío 

 <head> <style> h2 { position: relative; } </style> </head> <body> <h1>On Being Well-Positioned</h1> <h2>Move me!</h2> <p>I still think the h2 is where it normally sits.</p> </body>

Solución 

 // solution required
## Instructions -
-Use las compensaciones de CSS para mover el h2 15 píxeles a la derecha y 10 píxeles hacia arriba. -
+
Use las compensaciones de CSS para mover el h2 15 píxeles a la derecha y 10 píxeles hacia arriba.
## Tests
```yml tests: - - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el h2 10px hacia arriba. En otras palabras, aléjelo 10px de la bottom de donde normalmente se sienta. ' + - text: 'Su código debe usar un desplazamiento de CSS para colocar relativamente el h2 10px hacia arriba. En otras palabras, aléjelo 10px de la bottom de donde normalmente se sienta.' testString: 'assert($("h2").css("bottom") == "10px", "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.");' - - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el h2 15px hacia la derecha. En otras palabras, aléjelo a 15px de la left de donde normalmente se encuentra. + - text: 'Su código debe usar un desplazamiento de CSS para colocar relativamente el h2 15px hacia la derecha. En otras palabras, aléjelo 15px de la left de donde normalmente se sienta.' testString: 'assert($("h2").css("left") == "15px", "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.");' ``` @@ -49,6 +46,7 @@ tests:

Move me!

I still think the h2 is where it normally sits.

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.spanish.md index 0634f17a6a..69de914b16 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.spanish.md @@ -1,20 +1,16 @@ --- id: 587d78a3367417b2b2512ace title: Push Elements Left or Right with the float Property -localeTitle: Empuje los elementos hacia la izquierda o hacia la derecha con la propiedad float challengeType: 0 videoUrl: '' +localeTitle: Empuje los elementos hacia la izquierda o hacia la derecha con la propiedad float --- ## Description -
-La siguiente herramienta de posicionamiento no usa realmente la position , pero establece la propiedad de float de un elemento. Los elementos flotantes se eliminan del flujo normal de un documento y se empujan hacia la left o hacia la right de su elemento principal que contiene. Se usa comúnmente con la propiedad de width para especificar cuánto espacio horizontal requiere el elemento flotante. -
+
La siguiente herramienta de posicionamiento no usa realmente la position , pero establece la propiedad de float de un elemento. Los elementos flotantes se eliminan del flujo normal de un documento y se empujan hacia la left o hacia la right de su elemento principal que contiene. Se usa comúnmente con la propiedad de width para especificar cuánto espacio horizontal requiere el elemento flotante.
## Instructions -
-El marcado dado funcionaría bien como un diseño de dos columnas, con la section y los elementos a aside lado uno del otro. Dé al elemento #left un float de la left y el elemento #right un float de la right . -
+
El marcado dado funcionaría bien como un diseño de dos columnas, con los elementos de section y aside uno al lado del otro. Dé al elemento #left un float de la left y el elemento #right un float de la right .
## Tests
@@ -65,6 +61,7 @@ tests:

Links

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.spanish.md index 9ae532ac5e..183736117f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.spanish.md @@ -1,20 +1,16 @@ --- id: 587d781c367417b2b2512ac2 title: Set the font-size for Multiple Heading Elements -localeTitle: Establecer el tamaño de fuente para varios elementos de encabezado challengeType: 0 videoUrl: '' +localeTitle: Establecer el tamaño de fuente para varios elementos de encabezado --- ## Description -
-La propiedad de font-size se usa para especificar el tamaño del texto en un elemento dado. Esta regla se puede usar para múltiples elementos para crear una consistencia visual del texto en una página. En este desafío, establecerá los valores de todas las etiquetas h1 a h6 para equilibrar los tamaños de los títulos. -
+
La propiedad de font-size se usa para especificar el tamaño del texto en un elemento dado. Esta regla se puede usar para múltiples elementos para crear una consistencia visual del texto en una página. En este desafío, establecerá los valores de todas las etiquetas h1 a h6 para equilibrar los tamaños de los títulos.
## Instructions -
-
  • Establezca el font-size de font-size de la etiqueta h1 en 68px.
  • Establezca el font-size de font-size de la etiqueta h2 en 52px.
  • Establezca el font-size de font-size de la etiqueta h3 en 40px.
  • Establezca el font-size de font-size de la etiqueta h4 en 32px.
  • Establezca el font-size de font-size de la etiqueta h5 en 21px.
  • Establezca el font-size de font-size de la etiqueta h6 en 14px.
-
+
  • Establezca el font-size de font-size de la etiqueta h1 en 68px.
  • Establezca el font-size de font-size de la etiqueta h2 en 52px.
  • Establezca el font-size de font-size de la etiqueta h3 en 40px.
  • Establezca el font-size de font-size de la etiqueta h4 en 32px.
  • Establezca el font-size de font-size de la etiqueta h5 en 21px.
  • Establezca el font-size de font-size de la etiqueta h6 en 14px.
## Tests
@@ -58,6 +54,7 @@ tests:

This is h4 text

This is h5 text
This is h6 text
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.spanish.md index e231638d85..307a288988 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.spanish.md @@ -1,20 +1,16 @@ --- id: 587d781c367417b2b2512ac4 title: Set the font-size of Paragraph Text -localeTitle: Establecer el tamaño de fuente del texto de párrafo challengeType: 0 videoUrl: '' +localeTitle: Establecer el tamaño de fuente del texto de párrafo --- ## Description -
-La propiedad de font-size en CSS no se limita a los encabezados, se puede aplicar a cualquier elemento que contenga texto. -
+
La propiedad de font-size en CSS no se limita a los encabezados, se puede aplicar a cualquier elemento que contenga texto.
## Instructions -
-Cambie el valor de la propiedad de font-size para el párrafo a 16px para hacerlo más visible. -
+
Cambie el valor de la propiedad de font-size para el párrafo a 16px para hacerlo más visible.
## Tests
@@ -42,6 +38,7 @@ tests:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.spanish.md index d94b6a78c9..d73b4481bf 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.spanish.md @@ -1,21 +1,16 @@ --- id: 587d781c367417b2b2512ac3 title: Set the font-weight for Multiple Heading Elements -localeTitle: Establecer el peso de la fuente para varios elementos de encabezado challengeType: 0 videoUrl: '' +localeTitle: Establecer el peso de la fuente para varios elementos de encabezado --- ## Description -
-Establece el font-size de font-size de cada etiqueta de encabezado en el último desafío, aquí ajustará el font-weight la font-weight . -La propiedad font-weight establece la cantidad de caracteres gruesos o delgados en una sección del texto. -
+
Establece el font-size de font-size de cada etiqueta de encabezado en el último desafío, aquí ajustarás el font-weight la font-weight . La propiedad font-weight establece la cantidad de caracteres gruesos o delgados en una sección del texto.
## Instructions -
-
  • Establezca el font-weight de la font-weight de la etiqueta h1 en 800.
  • Establezca el font-weight de la font-weight de la etiqueta h2 en 600.
  • Establezca el font-weight de la font-weight de la etiqueta h3 en 500.
  • Establezca el font-weight de la font-weight de la etiqueta h4 en 400.
  • Establezca el font-weight de la font-weight de la etiqueta h5 en 300.
  • Establezca el font-weight de la font-weight de la etiqueta h6 en 200.
-
+
  • Establezca el font-weight de la font-weight de la etiqueta h1 en 800.
  • Establezca el font-weight de la font-weight de la etiqueta h2 en 600.
  • Establezca el font-weight de la font-weight de la etiqueta h3 en 500.
  • Establezca el font-weight de la font-weight de la etiqueta h4 en 400.
  • Establezca el font-weight de la font-weight de la etiqueta h5 en 300.
  • Establezca el font-weight de la font-weight de la etiqueta h6 en 200.
## Tests
@@ -77,6 +72,7 @@ tests:

This is h4 text

This is h5 text
This is h6 text
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.spanish.md index 2e1f82d4fd..6d785e41f8 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.spanish.md @@ -1,20 +1,16 @@ --- id: 587d781d367417b2b2512ac5 title: Set the line-height of Paragraphs -localeTitle: Establecer la línea de altura de los párrafos challengeType: 0 videoUrl: '' +localeTitle: Establecer la línea de altura de los párrafos --- ## Description -
-CSS ofrece la line-height propiedad para cambiar la altura de cada línea en un bloque de texto. Como sugiere su nombre, cambia la cantidad de espacio vertical que obtiene cada línea de texto. -
+
CSS ofrece la line-height propiedad para cambiar la altura de cada línea en un bloque de texto. Como sugiere su nombre, cambia la cantidad de espacio vertical que obtiene cada línea de texto.
## Instructions -
-Agregue una propiedad de line-height a la etiqueta p y establézcala en 25px. -
+
Agregue una propiedad de line-height a la etiqueta p y establézcala en 25px.
## Tests
@@ -43,6 +39,7 @@ tests:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md index dafa6167b3..cafd489f21 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.spanish.md @@ -1,23 +1,16 @@ --- id: 587d78a9367417b2b2512ae9 title: Use a Bezier Curve to Move a Graphic -localeTitle: Use una curva Bezier para mover un gráfico challengeType: 0 videoUrl: '' +localeTitle: Use una curva Bezier para mover un gráfico --- ## Description -
-Un desafío anterior discutió la palabra clave de 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 de ease-out (para el elemento azul) y linear palabra clave linear (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de ease-out de uso 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 cómo avanza la animación a través del tiempo. Este es un ejemplo de una curva de Bezier que utiliza valores para imitar el estilo de relajación: -animation-timing-function: cubic-bezier(0, 0, 0.58, 1); -Recuerde que todas cubic-bezier funciones de cubic-bezier comienzan con p0 en (0, 0) y terminan con p3 en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a p1 y el valor de 0, luego va a p2 y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para p1 , hasta 0.58 para p2 ). Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores de x e y se invierte: el valor de y se mueve de 1 a 1 (sin cambio), y los valores de x se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación La duración de la animación. -
+
Un desafío anterior discutió la palabra clave de 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 de ease-out (para el elemento azul) y linear palabra clave linear (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de ease-out de uso 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 cómo avanza la animación a través del tiempo. Este es un ejemplo de una curva de Bezier que utiliza valores para imitar el estilo de animation-timing-function: cubic-bezier(0, 0, 0.58, 1); : animation-timing-function: cubic-bezier(0, 0, 0.58, 1); Recuerde que todas cubic-bezier funciones de cubic-bezier comienzan con p0 en (0, 0) y terminan con p3 en (1, 1). En este ejemplo, la curva se mueve más rápido a través del eje Y (comienza en 0, va a p1 y el valor de 0, luego va a p2 y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para p1 , hasta 0.58 para p2 ). Como resultado, el cambio en el elemento animado progresa más rápido que el tiempo de la animación para ese segmento. Hacia el final de la curva, la relación entre el cambio en los valores de x e y se invierte: el valor de y se mueve de 1 a 1 (sin cambio), y los valores de x se mueven de 0.58 a 1, lo que hace que los cambios de animación progresen más lentamente en comparación La duración de la animación.
## Instructions -
-Para ver el efecto de esta curva de Bezier en acción, cambie la animation-timing-function de animation-timing-function del elemento con id de red a una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente en 0, 0, 0.58, 1. Esto hará que ambos elementos progresen a través de la animación de manera similar. -
+
Para ver el efecto de esta curva de Bezier en acción, cambie la animation-timing-function de animation-timing-function del elemento con id de red a una función de cubic-bezier con x1, y1, x2, y2 valores establecidos respectivamente a 0, 0, 0.58, 1 Esto hará que ambos elementos progresen a través de la animación de manera similar.
## Tests
@@ -73,6 +66,7 @@ tests:
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.spanish.md index d316dca5a7..cb464cba42 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.spanish.md @@ -1,25 +1,16 @@ --- id: 587d78a5367417b2b2512ad7 title: Use a CSS Linear Gradient to Create a Striped Element -localeTitle: Use un gradiente lineal de CSS para crear un elemento de rayas challengeType: 0 videoUrl: '' +localeTitle: Use un gradiente lineal de CSS para crear un elemento de rayas --- ## Description -
-La función de repeating-linear-gradient() es muy similar a linear-gradient() con la principal diferencia de que repite el patrón de gradiente especificado. repeating-linear-gradient() acepta una variedad de valores, pero por simplicidad, trabajará con un valor de ángulo y valores de parada de color en este desafío. -El valor del ángulo es la dirección del gradiente. Las paradas de color son como los valores de ancho que marcan el lugar donde se produce una transición, y se dan con un porcentaje o un número de píxeles. -En el ejemplo que se muestra en el editor de código, el degradado comienza con el color yellow en 0 píxeles, que se mezcla con el segundo color blue a 40 píxeles desde el principio. Dado que la siguiente parada de color también es de 40 píxeles, el degradado cambia inmediatamente al green tercer color, que a su vez se mezcla con el valor del color red ya que está a 80 píxeles del comienzo del degradado. -Para este ejemplo, es útil pensar en las paradas de color como pares donde cada dos colores se mezclan. -0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px -Si todos los valores de parada de dos colores son del mismo color, la mezcla no es perceptible porque está entre el mismo color, seguida de Transición difícil al siguiente color, por lo que terminas con rayas. -
+
La función de repeating-linear-gradient() es muy similar a la linear-gradient() con la diferencia principal de que repite el patrón de gradiente especificado. repeating-linear-gradient() acepta una variedad de valores, pero por simplicidad, trabajará con un valor de ángulo y valores de parada de color en este desafío. El valor del ángulo es la dirección del gradiente. Las paradas de color son como los valores de ancho que marcan el lugar donde se produce una transición, y se dan con un porcentaje o un número de píxeles. En el ejemplo que se muestra en el editor de código, el degradado comienza con el color yellow en 0 píxeles, que se mezcla con el segundo color blue a 40 píxeles desde el principio. Dado que la siguiente parada de color también es de 40 píxeles, el degradado cambia inmediatamente al green tercer color, que a su vez se mezcla con el valor del color red ya que está a 80 píxeles del comienzo del degradado. Para este ejemplo, es útil pensar en las paradas de color como pares donde cada dos colores se mezclan. 0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px Si todos los valores de parada de dos colores son del mismo color, la mezcla no se nota porque está entre el mismo color, seguida de una transición difícil Al siguiente color, así terminas con rayas.
## Instructions -
-Haga rayas cambiando el repeating-linear-gradient() para usar un ángulo de gradiente de 45deg grados, luego establezca los dos primeros topes de color en yellow , y finalmente el segundo segundo color se detiene en black . -
+
Haga rayas cambiando el repeating-linear-gradient() para usar un ángulo de gradiente de 45deg grados, luego establezca las dos primeras paradas de color en yellow , y finalmente las segundas dos paradas en black .
## Tests
@@ -68,6 +59,7 @@ tests:
+ ``` @@ -79,9 +71,7 @@ tests: ## Solution
- ```js -var code = "background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.spanish.md index 87abee18d6..911fc6a86d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.spanish.md @@ -1,23 +1,16 @@ --- id: 587d78a7367417b2b2512ae0 title: Use CSS Animation to Change the Hover State of a Button -localeTitle: Usa la animación CSS para cambiar el estado de desplazamiento de un botón challengeType: 0 videoUrl: '' +localeTitle: Usa la animación CSS para cambiar el estado de desplazamiento de un botón --- ## Description -
-Puede usar CSS @keyframes para cambiar el color de un botón en su estado activo. -Aquí hay un ejemplo de cómo cambiar el ancho de una imagen al pasar el cursor: -
<style>
  img:hover {
    animation-name: width;
    animation-duration: 500ms;
  }

  @keyframes width {
    100% {
      width: 40px;
    }
  }
</style>

<img src="https://bit.ly/smallgooglelogo" alt="Google's Logo" />
-
+
Puede usar CSS @keyframes para cambiar el color de un botón en su estado activo. Aquí hay un ejemplo de cómo cambiar el ancho de una imagen al mover el mouse:
<estilo>
img: hover {
nombre de la animación: ancho;
animación-duración: 500ms;
}

ancho de @keyframes {
100% {
ancho: 40px;
}
}
</style>

<img src = "https://bit.ly/smallgooglelogo" alt = "Logo de Google" />
## Instructions -
-Tenga en cuenta que ms representa milisegundos, donde 1000 ms es igual a 1 s. -Use CSS @keyframes para cambiar el background-color de background-color del elemento del button para que se convierta en #4791d0 cuando un usuario se #4791d0 sobre él. La regla @keyframes solo debe tener una entrada para el 100% . -
+
Tenga en cuenta que ms representa milisegundos, donde 1000 ms es igual a 1 s. Use CSS @keyframes para cambiar el background-color de background-color del elemento del button para que se convierta en #4791d0 cuando un usuario se #4791d0 sobre él. La regla @keyframes solo debe tener una entrada para el 100% .
## Tests
@@ -26,7 +19,7 @@ Use CSS @keyframes para cambiar el background-color de tests: - text: La regla @keyframes debe usar el animation-name de color de fondo. testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the animation-name background-color.");' - - text: "Debería haber una regla en @keyframes que cambie el background-color a #4791d0 al 100%". + - text: 'Debería haber una regla en @keyframes que cambie el background-color a #4791d0 al 100%.' testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under @keyframes that changes the background-color to #4791d0 at 100%.");' ``` @@ -56,6 +49,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.spanish.md index 8f862ba70f..23c813a5ac 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.spanish.md @@ -1,22 +1,16 @@ --- id: 587d78a6367417b2b2512adb title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis -localeTitle: Utilice la propiedad CSS Transformar skewX para sesgar un elemento a lo largo del eje X challengeType: 0 videoUrl: '' +localeTitle: Utilice la propiedad CSS Transformar skewX para sesgar un elemento a lo largo del eje X --- ## Description -
-La siguiente función de la propiedad de transform es skewX() , que desvía el elemento seleccionado a lo largo de su eje X (horizontal) en un grado determinado. -El siguiente código sesga el elemento de párrafo en -32 grados a lo largo del eje X. -
p {
  transform: skewX(-32deg);
}
-
+
La siguiente función de la propiedad de transform es skewX() , que sesga el elemento seleccionado a lo largo de su eje X (horizontal) en un grado determinado. El siguiente código sesga el elemento de párrafo en -32 grados a lo largo del eje X.
pag {
transformar: skewX (-32deg);
}
## Instructions -
-Inclina el elemento con la ID de bottom en 24 grados a lo largo del eje X usando la propiedad de transform . -
+
Inclina el elemento con la ID de bottom en 24 grados a lo largo del eje X usando la propiedad de transform .
## Tests
@@ -53,6 +47,7 @@ tests:
+ ``` @@ -64,9 +59,7 @@ tests: ## Solution
- ```js -var code = "#bottom {background-color: blue; transform: skewX(24deg);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.spanish.md index 15c98dae92..5e4ed72415 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.spanish.md @@ -1,20 +1,16 @@ --- id: 587d78a6367417b2b2512adc title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis -localeTitle: Utilice la propiedad de transformación de CSS sesgada para sesgar un elemento a lo largo del eje Y challengeType: 0 videoUrl: '' +localeTitle: Utilice la propiedad de transformación de CSS sesgada para sesgar un elemento a lo largo del eje Y --- ## Description -
-Dado que la función skewX() el elemento seleccionado a lo largo del eje X en un grado determinado, no es sorprendente que la propiedad skewY() un elemento a lo largo del eje Y (vertical). -
+
Dado que la función skewX() desvía el elemento seleccionado a lo largo del eje X en un grado determinado, no es sorprendente que la propiedad skewY() un elemento a lo largo del eje Y (vertical).
## Instructions -
-Inclina el elemento con el id de top 10 grados top largo del eje Y utilizando la propiedad de transform . -
+
Inclina el elemento con la identificación de top -10 grados top largo del eje Y usando la propiedad de transform .
## Tests
@@ -52,6 +48,7 @@ tests:
+ ``` @@ -63,9 +60,7 @@ tests: ## Solution
- ```js -var code = "#top {background-color: red; transform: skewY(-10deg);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md index 0340972ffd..177a0bb53a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.spanish.md @@ -1,21 +1,16 @@ --- id: 587d78a5367417b2b2512ad9 title: Use the CSS Transform scale Property to Change the Size of an Element -localeTitle: Use la propiedad de escala de transformación CSS para cambiar el tamaño de un elemento challengeType: 0 videoUrl: '' +localeTitle: Use la propiedad de escala de transformación CSS para cambiar el tamaño de un elemento --- ## Description -
-Para cambiar la escala de un elemento, CSS tiene la propiedad de transform , junto con su función scale() . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página: -
p {
  transform:scale(2);
}
-
+
Para cambiar la escala de un elemento, CSS tiene la propiedad de transform , junto con su función scale() . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página:
pag {
transformar: escala (2);
}
## Instructions -
-Aumente el tamaño del elemento con el id de ball2 a 1.5 veces su tamaño original. -
+
Aumente el tamaño del elemento con el id de ball2 a 1.5 veces su tamaño original.
## Tests
@@ -61,6 +56,7 @@ tests:
+ ``` @@ -72,9 +68,7 @@ tests: ## Solution
- ```js -var code = "#ball2 {left: 65%; transform: scale(1.5);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.spanish.md index 90a5dfbd16..093528f43b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.spanish.md @@ -1,22 +1,16 @@ --- id: 587d78a5367417b2b2512ada title: Use the CSS Transform scale Property to Scale an Element on Hover -localeTitle: Use la propiedad de escala de transformación CSS para escalar un elemento al pasar el cursor challengeType: 0 videoUrl: '' +localeTitle: Use la propiedad de escala de transformación CSS para escalar un elemento al pasar el cursor --- ## Description -
-La propiedad de transform tiene una variedad de funciones que le permiten escalar, mover, rotar, sesgar, etc., sus elementos. Cuando se usa con pseudoclases como :hover el :hover que especifican un determinado estado de un elemento, la propiedad de transform puede agregar fácilmente interactividad a sus elementos. -Aquí hay un ejemplo para escalar los elementos del párrafo a 2.1 veces su tamaño original cuando un usuario se cierne sobre ellos: -
p:hover {
  transform: scale(2.1);
}
-
+
La propiedad de transform tiene una variedad de funciones que le permiten escalar, mover, rotar, sesgar, etc., sus elementos. Cuando se usa con pseudoclases como :hover el :hover que especifican un determinado estado de un elemento, la propiedad de transform puede agregar fácilmente interactividad a sus elementos. Aquí hay un ejemplo para escalar los elementos del párrafo a 2.1 veces su tamaño original cuando un usuario se desplaza sobre ellos:
p: hover {
transformar: escala (2.1);
}
## Instructions -
-Añadir una regla CSS para el hover estado del div y utilizar el transform la propiedad para escalar la div elemento a 1,1 veces su tamaño original cuando un usuario se desplaza sobre él. -
+
Añadir una regla CSS para el hover estado del div y utilizar el transform la propiedad para escalar la div elemento a 1,1 veces su tamaño original cuando un usuario se desplaza sobre él.
## Tests
@@ -53,6 +47,7 @@ tests:
+ ``` @@ -64,9 +59,7 @@ tests: ## Solution
- ```js -var code = "div:hover {transform: scale(1.1);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.spanish.md index a9dece83a2..b228180618 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.spanish.md @@ -1,20 +1,16 @@ --- id: 587d781a367417b2b2512ab9 title: Use the em Tag to Italicize Text -localeTitle: Utilice la etiqueta em para cursiva texto challengeType: 0 videoUrl: '' +localeTitle: Utilice la etiqueta em para cursiva texto --- ## Description -
-Para enfatizar texto, puedes usar la etiqueta em . Esto muestra el texto en cursiva, ya que el navegador aplica el CSS del font-style: italic; de font-style: italic; al elemento. -
+
Para enfatizar el texto, puedes usar la etiqueta em . Esto muestra el texto en cursiva, ya que el navegador aplica el CSS del font-style: italic; de font-style: italic; al elemento.
## Instructions -
-Envuelva una etiqueta em alrededor del contenido de la etiqueta de párrafo para darle énfasis. -
+
Envuelva una etiqueta em alrededor del contenido de la etiqueta de párrafo para darle énfasis.
## Tests
@@ -74,6 +70,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md index 7df68c6cd6..913c950ea0 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.spanish.md @@ -1,20 +1,16 @@ --- id: 587d781b367417b2b2512aba title: Use the s Tag to Strikethrough Text -localeTitle: Use la etiqueta s para tachar el texto challengeType: 0 videoUrl: '' +localeTitle: Use la etiqueta s para tachar el texto --- ## Description -
-Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta s . Muestra que una sección de texto ya no es válida. Con la etiqueta s , el navegador aplica el CSS de text-decoration: line-through; al elemento. -
+
Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta s . Muestra que una sección de texto ya no es válida. Con la etiqueta s , el navegador aplica el CSS de text-decoration: line-through; al elemento.
## Instructions -
-Envuelva la etiqueta s alrededor de "Google" dentro de la etiqueta h4 y luego agregue la palabra Alfabeto a su lado, que no debería tener el formato tachado. -
+
Envuelva la etiqueta s alrededor de "Google" dentro de la etiqueta h4 y luego agregue la palabra Alfabeto junto a ella, que no debería tener el formato tachado.
## Tests
@@ -76,6 +72,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.spanish.md index 928b91468a..da1bb1094f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.spanish.md @@ -1,20 +1,16 @@ --- id: 587d781a367417b2b2512ab7 title: Use the strong Tag to Make Text Bold -localeTitle: Utilice la etiqueta fuerte para hacer el texto en negrita challengeType: 0 videoUrl: '' +localeTitle: Utilice la etiqueta fuerte para hacer el texto en negrita --- ## Description -
-Para poner el texto en negrita, puede usar la etiqueta strong . Esto se usa a menudo para llamar la atención sobre el texto y simbolizar que es importante. Con la etiqueta strong , el navegador aplica el CSS de font-weight: bold; al elemento. -
+
Para poner el texto en negrita, puede utilizar la etiqueta strong . Esto se usa a menudo para llamar la atención sobre el texto y simbolizar que es importante. Con la etiqueta strong , el navegador aplica el CSS de font-weight: bold; al elemento.
## Instructions -
-Envuelve una etiqueta strong alrededor de "Stanford University" dentro de la etiqueta p . -
+
Envuelva una etiqueta strong alrededor de "Stanford University" dentro de la etiqueta p .
## Tests
@@ -76,6 +72,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.spanish.md index 31bf09f817..937090d295 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.spanish.md @@ -1,22 +1,16 @@ --- id: 587d781c367417b2b2512ac0 title: Use the text-transform Property to Make Text Uppercase -localeTitle: Utilice la propiedad de transformación de texto para hacer mayúsculas de texto challengeType: 0 videoUrl: '' +localeTitle: Utilice la propiedad de transformación de texto para hacer mayúsculas de texto --- ## Description -
-La propiedad de text-transform en CSS se usa para cambiar la apariencia del texto. Es una forma conveniente de asegurarse de que el texto de una página web se muestre de forma coherente, sin tener que cambiar el contenido de texto de los elementos HTML reales. -La siguiente tabla muestra cómo los diferentes valores de text-transform cambian el texto de ejemplo "Transformarme". -
Valor Resultado
lowercase "transformame"
uppercase "Transfórmame"
capitalize "Transformame"
initial Usa el valor por defecto
inherit Use el valor de text-transform del elemento padre
none Predeterminado: usar el texto original
-
+
La propiedad de text-transform en CSS se usa para cambiar la apariencia del texto. Es una forma conveniente de asegurarse de que el texto de una página web se muestre de forma coherente, sin tener que cambiar el contenido de texto de los elementos HTML reales. La siguiente tabla muestra cómo los diferentes valores de text-transform cambian el texto de ejemplo "Transformarme".
Valor Resultado
lowercase "transformame"
uppercase "Transfórmame"
capitalize "Transformame"
initial Usa el valor por defecto
inherit Use el valor de text-transform del elemento padre
none Predeterminado: usar el texto original
## Instructions -
-Transforme el texto del h4 para que esté en mayúsculas utilizando la propiedad de text-transform . -
+
Transforme el texto del h4 para que esté en mayúsculas utilizando la propiedad de text-transform .
## Tests
@@ -84,6 +78,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.spanish.md index a558d19602..f375cc41de 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.spanish.md @@ -1,21 +1,16 @@ --- id: 587d781a367417b2b2512ab8 title: Use the u Tag to Underline Text -localeTitle: Use la etiqueta u para subrayar el texto challengeType: 0 videoUrl: '' +localeTitle: Use la etiqueta u para subrayar el texto --- ## Description -
-Para subrayar el texto, puede utilizar la etiqueta u . Esto se usa a menudo para indicar que una sección del texto es importante, o algo para recordar. Con la etiqueta u , el navegador aplica el CSS de text-decoration: underline; al elemento. -
+
Para subrayar el texto, puede utilizar la etiqueta u . Esto se usa a menudo para indicar que una sección del texto es importante, o algo para recordar. Con la etiqueta u , el navegador aplica el CSS de text-decoration: underline; al elemento.
## Instructions -
-Envuelva la etiqueta u únicamente alrededor del texto "Estudiantes de doctorado". -Nota
Intente evitar usar la etiqueta u cuando podría confundirse con un enlace. Las etiquetas de anclaje también tienen un formato subrayado predeterminado. -
+
Envuelva la etiqueta u solo alrededor del texto "Estudiantes de doctorado". Nota
Intente evitar usar la etiqueta u cuando podría confundirse con un enlace. Las etiquetas de anclaje también tienen un formato subrayado predeterminado.
## Tests
@@ -75,6 +70,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md index f0bb52e5b6..15d3b350f1 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.spanish.md @@ -1,23 +1,17 @@ --- id: bad87fee1348bd9aedf08823 title: Add a Negative Margin to an Element -localeTitle: Agregar un margen negativo a un elemento challengeType: 0 guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-a-negative-margin-to-an-element' videoUrl: '' +localeTitle: Agregar un margen negativo a un elemento --- ## Description -
-El margin un elemento controla la cantidad de espacio entre el border un elemento y los elementos circundantes. -Si establece el margin un elemento en un valor negativo, el elemento aumentará de tamaño. -
+
El margin un elemento controla la cantidad de espacio entre el border un elemento y los elementos circundantes. Si establece el margin un elemento en un valor negativo, el elemento aumentará de tamaño.
## Instructions -
-Intente establecer el margin en un valor negativo como el del cuadro rojo. -Cambie el margin del cuadro azul a -15px , para que llene todo el ancho horizontal del cuadro amarillo que lo rodea. -
+
Intente establecer el margin en un valor negativo como el del cuadro rojo. Cambie el margin del cuadro azul a -15px , para que llene todo el ancho horizontal del cuadro amarillo que lo rodea.
## Tests
@@ -74,6 +68,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md index dcd07ee4d9..5326c0c72e 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-borders-around-your-elements.spanish.md @@ -1,25 +1,17 @@ --- id: bad87fee1348bd9bedf08813 title: Add Borders Around Your Elements -localeTitle: Añadir bordes alrededor de sus elementos challengeType: 0 guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-borders-around-your-elements' videoUrl: '' +localeTitle: Añadir bordes alrededor de sus elementos --- ## Description -
-Los bordes CSS tienen propiedades como style , color y width -Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase: -
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
-
+
Los bordes CSS tienen propiedades como style , color y width Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase:
<estilo>
.thin-red-border {
color del borde: rojo;
ancho del borde: 5px;
estilo de borde: sólido;
}
</style>
## Instructions -
-Crea una clase llamada thick-green-border . Esta clase debe agregar un borde verde sólido de 10 px alrededor de un elemento HTML. Aplica la clase a tu foto de gato. -Recuerde que puede aplicar varias clases a un elemento utilizando su atributo de class , separando cada nombre de clase con un espacio. Por ejemplo: -<img class="class1 class2"> -
+
Crea una clase llamada thick-green-border . Esta clase debe agregar un borde verde sólido de 10 px alrededor de un elemento HTML. Aplica la clase a tu foto de gato. Recuerde que puede aplicar varias clases a un elemento utilizando su atributo de class , separando cada nombre de clase con un espacio. Por ejemplo: <img class="class1 class2">
## Tests
@@ -98,6 +90,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md index bbbfbf3fa2..81b3bc30df 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.spanish.md @@ -1,21 +1,16 @@ --- id: bad87fee1248bd9aedf08824 title: Add Different Margins to Each Side of an Element -localeTitle: Añadir diferentes márgenes a cada lado de un elemento challengeType: 0 videoUrl: '' +localeTitle: Añadir diferentes márgenes a cada lado de un elemento --- ## Description -
-A veces querrá personalizar un elemento para que tenga un margin diferente en cada uno de sus lados. -CSS le permite controlar el margin de los cuatro lados individuales de un elemento con las propiedades margin-top , margin-right , margin-bottom y margin-left . -
+
A veces querrá personalizar un elemento para que tenga un margin diferente en cada uno de sus lados. CSS le permite controlar el margin de los cuatro lados individuales de un elemento con las propiedades margin-top , margin-right , margin-bottom y margin-left .
## Instructions -
-Dé a la caja azul un margin de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho. -
+
Dé a la caja azul un margin de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
## Tests
@@ -79,6 +74,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md index f64550f59d..3528b32e97 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.spanish.md @@ -1,22 +1,17 @@ --- id: bad87fee1348bd9aedf08824 title: Add Different Padding to Each Side of an Element -localeTitle: Añadir diferente relleno a cada lado de un elemento challengeType: 0 guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-different-padding-to-each-side-of-an-element' videoUrl: '' +localeTitle: Añadir diferente relleno a cada lado de un elemento --- ## Description -
-A veces querrá personalizar un elemento para que tenga diferentes cantidades de padding en cada uno de sus lados. -CSS le permite controlar el padding de los cuatro lados individuales de un elemento con las propiedades padding-top , padding-right , padding-bottom y padding-left . -
+
A veces querrá personalizar un elemento para que tenga diferentes cantidades de padding en cada uno de sus lados. CSS le permite controlar el padding de los cuatro lados individuales de un elemento con las propiedades padding-top , padding-right , padding-bottom y padding-left .
## Instructions -
-Dé a la caja azul un padding de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho. -
+
Dale a la caja azul un padding de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
## Tests
@@ -80,6 +75,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md index 790c656a04..5aefe65ec5 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.spanish.md @@ -1,31 +1,26 @@ --- id: bad87fee1348bd9aedf08814 title: Add Rounded Corners with border-radius -localeTitle: Añadir esquinas redondeadas con radio de borde challengeType: 0 guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-rounded-corners-a-border-radius' videoUrl: '' +localeTitle: Añadir esquinas redondeadas con radio de borde --- ## Description -
-Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius . -
+
Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius .
## Instructions -
-Puede especificar un border-radius con píxeles. Dale a tu foto de gato un border-radius de 10px de 10px . -Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar border-radius .thick-green-border clase .thick-green-border o a la clase .smaller-image . -
+
Puede especificar un border-radius con píxeles. Dale a tu foto de gato un border-radius de 10px de 10px . Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar border-radius .thick-green-border clase .thick-green-border o a la clase .smaller-image .
## Tests
```yml tests: - - text: El elemento de su imagen debe tener la clase "borde verde grueso." + - text: El elemento de su imagen debe tener la clase "borde verde grueso". testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");' - - text: Su imagen debe tener un radio de borde de 10px + - text: Tu imagen debe tener un radio de 10px de 10px testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of 10px");' ``` @@ -95,6 +90,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md index 31f9bbd49b..5d15f76977 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.spanish.md @@ -1,23 +1,17 @@ --- id: bad87fee1348bd9aedf08822 title: Adjust the Margin of an Element -localeTitle: Ajustar el margen de un elemento challengeType: 0 guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/adjust-the-margin-of-an-element' videoUrl: '' +localeTitle: Ajustar el margen de un elemento --- ## Description -
-El margin un elemento controla la cantidad de espacio entre el border un elemento y los elementos circundantes. -Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene un margin más margin que el cuadro azul, lo que hace que parezca más pequeño. -Cuando aumenta el margin del cuadro azul, aumentará la distancia entre su borde y los elementos circundantes. -
+
El margin un elemento controla la cantidad de espacio entre el border un elemento y los elementos circundantes. Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene un margin más margin que el cuadro azul, lo que hace que parezca más pequeño. Cuando aumente el margin del cuadro azul, aumentará la distancia entre su borde y los elementos circundantes.
## Instructions -
-Cambie el margin del cuadro azul para que coincida con el del cuadro rojo. -
+
Cambie el margin del cuadro azul para que coincida con el del cuadro rojo.
## Tests
@@ -75,6 +69,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md index 2d3a1170b5..2d1d40af67 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.spanish.md @@ -1,26 +1,17 @@ --- id: bad88fee1348bd9aedf08825 title: Adjust the Padding of an Element -localeTitle: Ajustar el relleno de un elemento challengeType: 0 guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/adjust-the-padding-of-an-element' videoUrl: '' +localeTitle: Ajustar el relleno de un elemento --- ## Description -
-Ahora vamos a guardar nuestra aplicación Cat Photo App por un tiempo y aprender más sobre el estilo HTML. -Es posible que ya hayas notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos. -Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: padding , margin y border . -El padding un elemento controla la cantidad de espacio entre el contenido del elemento y su border . -Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más padding que el cuadro azul. -Cuando aumenta el padding del cuadro azul, aumentará la distancia ( padding ) entre el texto y el borde que lo rodea. -
+
Ahora vamos a guardar nuestra aplicación Cat Photo por un tiempo y aprender más sobre el estilo de HTML. Es posible que ya hayas notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos. Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: padding , margin y border . El padding un elemento controla la cantidad de espacio entre el contenido del elemento y su border . Aquí, podemos ver que el cuadro azul y el cuadro rojo están anidados dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más padding que el cuadro azul. Cuando aumente el padding del cuadro azul, aumentará la distancia ( padding ) entre el texto y el borde que lo rodea.
## Instructions -
-Cambie el padding de su caja azul para que coincida con el de su caja roja. -
+
Cambie el padding de su caja azul para que coincida con el de su caja roja.
## Tests
@@ -76,6 +67,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md index 7a673ca2dc..205e6a8e5f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.spanish.md @@ -1,25 +1,16 @@ --- id: 5a9d7286424fe3d0e10cad13 title: Attach a Fallback value to a CSS Variable -localeTitle: Adjuntar un valor de reserva a una variable CSS challengeType: 0 videoUrl: '' +localeTitle: Adjuntar un valor de reserva a una variable CSS --- ## Description -
-Al usar su variable como un valor de propiedad CSS, puede adjuntar un valor de reserva al que su navegador volverá si la variable dada no es válida. -Nota: Este respaldo no se utiliza para aumentar la compatibilidad del navegador, y no funcionará en los navegadores IE. Más bien, se usa para que el navegador tenga un color para mostrar si no puede encontrar su variable. -Así es como lo haces: -
background: var(--penguin-skin, black);
-Esto establecerá el fondo en negro si su variable no se estableció. -Tenga en cuenta que esto puede ser útil para la depuración. -
+
Cuando use su variable como un valor de propiedad CSS, puede adjuntar un valor de reserva al que su navegador volverá si la variable dada no es válida. Nota: este respaldo no se utiliza para aumentar la compatibilidad del navegador, y no funcionará en los navegadores IE. Más bien, se usa para que el navegador tenga un color para mostrar si no puede encontrar su variable. Así es como lo haces:
fondo: var (- piel de pingüino, negro);
Esto establecerá el fondo en negro si su variable no se estableció. Tenga en cuenta que esto puede ser útil para la depuración.
## Instructions -
-Parece que hay un problema con las variables proporcionadas a las .penguin-top y .penguin-bottom . En lugar de corregir el error tipográfico, agregue un valor alternativo de black a la propiedad de background de las .penguin-top y .penguin-bottom . -
+
Parece que hay un problema con las variables proporcionadas a las .penguin-top y .penguin-bottom . En lugar de corregir el error tipográfico, agregue un valor alternativo de black a la propiedad de background de las .penguin-top y .penguin-bottom .
## Tests
@@ -245,6 +236,7 @@ tests:
+ ``` @@ -256,9 +248,7 @@ tests: ## Solution
- ```js -var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md index 5e6a1569e9..78209c71c4 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/cascading-css-variables.spanish.md @@ -1,29 +1,23 @@ --- id: 5a9d7295424fe3d0e10cad14 title: Cascading CSS variables -localeTitle: Variables CSS en cascada challengeType: 0 videoUrl: '' +localeTitle: Variables CSS en cascada --- ## Description -
-Cuando crea una variable, queda disponible para que la use dentro del elemento en el que la creó. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como cascada . -Debido a la cascada, las variables CSS a menudo se definen en el elemento : raíz . -:root es un selector de pseudo-clase que coincide con el elemento raíz del documento, generalmente el elemento. Al crear sus variables en :root , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo. -
+
Cuando creas una variable, queda disponible para que la uses dentro del elemento en el que la creas. También está disponible dentro de cualquier elemento anidado dentro de él. Este efecto se conoce como cascada . Debido a la conexión en cascada, las variables CSS a menudo se definen en el elemento : raíz . :root es un selector de pseudo-clase que coincide con el elemento raíz del documento, generalmente el elemento. Al crear sus variables en :root , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
## Instructions -
-Defina una variable llamada --penguin-belly en el selector de :root y déle el valor de pink . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable. -
+
Defina una variable llamada --penguin-belly en el selector de :root y dale el valor de pink . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
## Tests
```yml tests: - - text: 'declara la variable --penguin-belly en la :root y --penguin-belly a pink ' + - text: 'declara la variable --penguin-belly en la :root y --penguin-belly a pink .' testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the --penguin-belly variable in the :root and assign it to pink.");' ``` @@ -238,6 +232,7 @@ tests:
+ ``` @@ -249,9 +244,7 @@ tests: ## Solution
- ```js -var code = ":root {--penguin-belly: pink;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md index a9e96a502f..6da9fe9648 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.spanish.md @@ -1,21 +1,16 @@ --- id: 5a9d72a1424fe3d0e10cad15 title: Change a variable for a specific area -localeTitle: Cambiar una variable para un área específica challengeType: 0 videoUrl: '' +localeTitle: Cambiar una variable para un área específica --- ## Description -
-Cuando cree sus variables en :root , establecerán el valor de esa variable para toda la página. -Puede sobrescribir estas variables configurándolas nuevamente dentro de un elemento específico. -
+
Cuando cree sus variables en :root , establecerán el valor de esa variable para toda la página. Luego puede sobrescribir estas variables configurándolas nuevamente dentro de un elemento específico.
## Instructions -
-Cambie el valor de --penguin-belly a white en la clase de penguin . -
+
Cambia el valor de --penguin-belly a white en la clase de penguin .
## Tests
@@ -239,6 +234,7 @@ tests:
+ ``` @@ -250,9 +246,7 @@ tests: ## Solution
- ```js -var code = ".penguin {--penguin-belly: white;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md index 528ab8ceda..4609af6fd5 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-color-of-text.spanish.md @@ -1,25 +1,16 @@ --- id: bad87fee1348bd9aedf08803 title: Change the Color of Text -localeTitle: Cambiar el color del texto challengeType: 0 videoUrl: '' +localeTitle: Cambiar el color del texto --- ## Description -
-Ahora vamos a cambiar el color de algunos de nuestros textos. -Podemos hacer esto cambiando el style de su elemento h2 . -La propiedad que es responsable del color del texto de un elemento es la propiedad de estilo de color . -Así es como establecería el color del texto de su elemento h2 en azul: -<h2 style="color: blue;">CatPhotoApp</h2> -Tenga en cuenta que es una buena práctica finalizar las declaraciones de style línea con una ; . -
+
Ahora cambiemos el color de algunos de nuestros textos. Podemos hacer esto cambiando el style de su elemento h2 . La propiedad que es responsable del color del texto de un elemento es la propiedad de estilo de color . A continuación le indicamos cómo establecería el color del texto de su elemento h2 en azul: <h2 style="color: blue;">CatPhotoApp</h2> Tenga en cuenta que es una buena práctica finalizar las declaraciones de style línea con una ; .
## Instructions -
-Cambia el estilo de tu elemento h2 para que su color de texto sea rojo. -
+
Cambia el estilo de tu elemento h2 para que su color de texto sea rojo.
## Tests
@@ -72,6 +63,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md index caabbdf7b8..99114f0d57 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.spanish.md @@ -1,28 +1,23 @@ --- id: bad87fee1348bd9aedf08806 title: Change the Font Size of an Element -localeTitle: Cambiar el tamaño de fuente de un elemento challengeType: 0 videoUrl: '' +localeTitle: Cambiar el tamaño de fuente de un elemento --- ## Description -
-El tamaño de fuente se controla mediante la propiedad CSS de font-size , como esta: -
h1 {
  font-size: 30px;
}
-
+
El tamaño de fuente se controla mediante la propiedad CSS de font-size , como esta:
h1 {
tamaño de fuente: 30px;
}
## Instructions -
-Dentro de la misma etiqueta <style> que contiene su clase de red-text , cree una entrada para los elementos p y establezca el font-size en 16 píxeles ( 16px ). -
+
Dentro de la misma etiqueta <style> que contiene su clase de red-text , cree una entrada para los elementos p y establezca el font-size en 16 píxeles ( 16px ).
## Tests
```yml tests: - - text: 'Entre las etiquetas de style , 16px elementos p font-size de font-size de 16px . El navegador y el zoom de texto deben estar al 100% ". + - text: 'Entre las etiquetas de style , 16px elementos p font-size de font-size de 16px . El navegador y el zoom de texto deben estar al 100%.' testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.");' ``` @@ -72,6 +67,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md index a3f475e841..2411b15c91 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/create-a-custom-css-variable.spanish.md @@ -1,23 +1,16 @@ --- id: 5a9d726c424fe3d0e10cad11 title: Create a custom CSS Variable -localeTitle: Crear una variable CSS personalizada challengeType: 0 videoUrl: '' +localeTitle: Crear una variable CSS personalizada --- ## Description -
-Para crear una Variable CSS, solo debes darle un name con two dashes delante y asignarle un value como este: -
--penguin-skin: gray;
-Esto creará una variable llamada --penguin-skin y le asignará el valor de gray . -Ahora puede usar esa variable en otra parte de su CSS para cambiar el valor de otros elementos a gris. -
+
Para crear una Variable CSS, solo necesitas darle un name con two dashes delante y asignarle un value como este:
--penguin-piel: gris;
Esto creará una variable llamada --penguin-skin y le asignará el valor de gray . Ahora puede usar esa variable en otra parte de su CSS para cambiar el valor de otros elementos a gris.
## Instructions -
-En la clase de penguin , crea un nombre de variable --penguin-skin y dale un valor de gray -
+
En la clase de penguin , crea un nombre de variable --penguin-skin y dale un valor de gray
## Tests
@@ -234,6 +227,7 @@ tests:
+ ``` @@ -245,9 +239,7 @@ tests: ## Solution
- ```js -var code = ".penguin {--penguin-skin: gray;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md index bc55e10ef0..ad0ff434b1 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.spanish.md @@ -1,22 +1,16 @@ --- id: bad87fed1348bd9aede07836 title: Give a Background Color to a div Element -localeTitle: Dar un color de fondo a un elemento div challengeType: 0 videoUrl: '' +localeTitle: Dar un color de fondo a un elemento div --- ## Description -
-Puede establecer el color de fondo de un elemento con la propiedad de background-color . -Por ejemplo, si quisiera que el color de fondo de un elemento fuera green , lo pondría dentro de su elemento de style : -
.green-background {
  background-color: green;
}
-
+
Puede establecer el color de fondo de un elemento con la propiedad de background-color . Por ejemplo, si quisiera que el color de fondo de un elemento fuera green , lo pondría dentro de su elemento de style :
.green-background {
color de fondo: verde;
}
## Instructions -
-Crea una clase llamada silver-background con el background-color de background-color de plata. Asigna esta clase a tu elemento div . -
+
Crea una clase llamada silver-background con el background-color de background-color de plata. Asigna esta clase a tu elemento div .
## Tests
@@ -98,6 +92,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md index dc6234bcf2..e3704a294f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/import-a-google-font.spanish.md @@ -1,27 +1,16 @@ --- id: bad87fee1348bd9aedf08807 title: Import a Google Font -localeTitle: Importar una fuente de Google challengeType: 0 videoUrl: '' +localeTitle: Importar una fuente de Google --- ## Description -
-Además de especificar las fuentes comunes que se encuentran en la mayoría de los sistemas operativos, también podemos especificar fuentes web no estándar y personalizadas para su uso en nuestro sitio web. Existen varias fuentes de fuentes web en Internet, pero, para este ejemplo, nos centraremos en la biblioteca de fuentes de Google. -Google Fonts es una biblioteca gratuita de fuentes web que puede usar en su CSS haciendo referencia a la URL de la fuente. -Entonces, sigamos adelante, importemos y apliquemos una fuente de Google (tenga en cuenta que si Google está bloqueado en su país, deberá saltarse este desafío). -Para importar una fuente de Google, puede copiar la URL de la (s) fuente (s) de la biblioteca de fuentes de Google y luego pegarla en su HTML. Para este desafío, importaremos la fuente Lobster . Para hacer esto, copie el siguiente fragmento de código y péguelo en la parte superior de su editor de código (antes del elemento de style apertura): -<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -Ahora puedes usar la fuente Lobster en tu CSS usando Lobster como el FAMILY_NAME como en el siguiente ejemplo:
font-family: FAMILY_NAME, GENERIC_NAME; . -El GENERIC_NAME es opcional, y es una fuente alternativa en caso de que la otra fuente especificada no esté disponible. Esto está cubierto en el próximo desafío. -Los nombres de las familias distinguen entre mayúsculas y minúsculas y deben incluirse entre comillas si hay un espacio en el nombre. Por ejemplo, necesita citas para usar la fuente "Open Sans" , pero no para usar la fuente Lobster . -
+
Además de especificar las fuentes comunes que se encuentran en la mayoría de los sistemas operativos, también podemos especificar fuentes web personalizadas y no estándar para su uso en nuestro sitio web. Existen varias fuentes de fuentes web en Internet, pero, para este ejemplo, nos centraremos en la biblioteca de fuentes de Google. Google Fonts es una biblioteca gratuita de fuentes web que puede utilizar en su CSS haciendo referencia a la URL de la fuente. Entonces, sigamos adelante, importemos y apliquemos una fuente de Google (tenga en cuenta que si Google está bloqueado en su país, deberá saltarse este desafío). Para importar una fuente de Google, puede copiar la URL de la (s) fuente (s) de la biblioteca de fuentes de Google y luego pegarla en su HTML. Para este desafío, importaremos la fuente Lobster . Para hacer esto, copie el siguiente fragmento de código y péguelo en la parte superior de su editor de código (antes del elemento de style apertura): <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> Ahora puede usar la fuente Lobster en su CSS usando Lobster como FAMILY_NAME como en el siguiente ejemplo:
font-family: FAMILY_NAME, GENERIC_NAME; . GENERIC_NAME es opcional y es una fuente alternativa en caso de que la otra fuente especificada no esté disponible. Esto está cubierto en el próximo desafío. Los nombres de las familias distinguen entre mayúsculas y minúsculas y deben estar entre comillas si hay un espacio en el nombre. Por ejemplo, necesita citas para usar la fuente "Open Sans" , pero no para usar la fuente Lobster .
## Instructions -
-Cree una regla CSS de la font-family que use la fuente Lobster y asegúrese de que se aplicará a su elemento h2 . -
+
Cree una regla CSS de la font-family que use la fuente Lobster y asegúrese de que se aplicará a su elemento h2 .
## Tests
@@ -89,6 +78,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md index e9fab4569f..6e9dade804 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.spanish.md @@ -1,22 +1,16 @@ --- id: 5b7d72c338cd7e35b63f3e14 title: Improve Compatibility with Browser Fallbacks -localeTitle: Mejora la compatibilidad con los fallbacks del navegador challengeType: 0 videoUrl: '' +localeTitle: Mejora la compatibilidad con los fallbacks del navegador --- ## Description -
-Al trabajar con CSS, es probable que tenga problemas de compatibilidad con el navegador en algún momento. Esta es la razón por la que es importante proporcionar interrupciones en el navegador para evitar posibles problemas. -Cuando su navegador analiza el CSS de una página web, ignora cualquier propiedad que no reconozca o admita. Por ejemplo, si usa una variable CSS para asignar un color de fondo en un sitio, Internet Explorer ignorará el color de fondo porque no admite las variables CSS. En ese caso, el navegador utilizará cualquier valor que tenga para esa propiedad. Si no puede encontrar ningún otro valor establecido para esa propiedad, volverá al valor predeterminado, que generalmente no es ideal. -Esto significa que si desea proporcionar un respaldo de navegador, es tan fácil como proporcionar otro valor más ampliamente admitido inmediatamente antes de su declaración. De esa manera, un navegador antiguo tendrá algo en lo que basarse, mientras que un navegador más nuevo simplemente interpretará cualquier declaración que se presente más adelante en la cascada. -
+
Cuando trabaje con CSS, es probable que tenga problemas de compatibilidad con el navegador en algún momento. Esta es la razón por la que es importante proporcionar interrupciones en el navegador para evitar posibles problemas. Cuando su navegador analiza el CSS de una página web, ignora cualquier propiedad que no reconozca o admita. Por ejemplo, si usa una variable CSS para asignar un color de fondo en un sitio, Internet Explorer ignorará el color de fondo porque no admite las variables CSS. En ese caso, el navegador utilizará cualquier valor que tenga para esa propiedad. Si no puede encontrar ningún otro valor establecido para esa propiedad, volverá al valor predeterminado, que generalmente no es ideal. Esto significa que si desea proporcionar un respaldo de navegador, es tan fácil como proporcionar otro valor más ampliamente soportado inmediatamente antes de su declaración. De esa manera, un navegador antiguo tendrá algo en lo que basarse, mientras que un navegador más nuevo simplemente interpretará cualquier declaración que se presente más adelante en la cascada.
## Instructions -
-Parece que se está utilizando una variable para establecer el color de fondo de la clase .red-box . Mejoremos la compatibilidad de nuestro navegador agregando otra declaración de background justo antes de la declaración existente y establezcamos su valor en rojo. -
+
Parece que se está utilizando una variable para establecer el color de fondo de la clase .red-box . Mejoremos la compatibilidad de nuestro navegador agregando otra declaración de background justo antes de la declaración existente y establezcamos su valor en rojo.
## Tests
@@ -48,6 +42,7 @@ tests: }
+ ``` @@ -59,9 +54,7 @@ tests: ## Solution
- ```js -var code=".red-box {background: red; background: var(--red-color);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md index 18f5ce2740..7ed64323d8 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9aedf08746 title: Inherit Styles from the Body Element -localeTitle: Heredar estilos del elemento cuerpo challengeType: 0 videoUrl: '' +localeTitle: Heredar estilos del elemento cuerpo --- ## Description -
-Ahora hemos comprobado que cada página HTML tiene un elemento de body , y que su elemento de body también se puede diseñar con CSS. -Recuerde, puede diseñar su elemento de body como cualquier otro elemento HTML, y todos los demás elementos heredarán los estilos de su elemento de body . -
+
Ahora hemos comprobado que cada página HTML tiene un elemento de body y que su elemento de body también se puede diseñar con CSS. Recuerde, puede diseñar su elemento de body como cualquier otro elemento HTML, y todos los demás elementos heredarán los estilos de su elemento de body .
## Instructions -
-Primero, cree un elemento h1 con el texto Hello World -Luego, demos a todos los elementos en su página el color green agregando color: green; a la declaración de estilo de tu elemento body . -Finalmente, asigne a su elemento body la familia de fuentes de monospace agregando font-family: monospace; a la declaración de estilo de tu elemento body . -
+
Primero, cree un elemento h1 con el texto Hello World Then, vamos a dar a todos los elementos de su página el color green agregando color: green; a la declaración de estilo de tu elemento body . Finalmente, asigne a su elemento body la familia de fuentes de monospace agregando font-family: monospace; a la declaración de estilo de tu elemento body .
## Tests
@@ -55,6 +48,7 @@ tests: } + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md index 882df5936c..780a3ea85b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.spanish.md @@ -1,27 +1,23 @@ --- id: bad87fee1348bd9aedf08815 title: Make Circular Images with a border-radius -localeTitle: Hacer imágenes circulares con un radio de borde challengeType: 0 videoUrl: '' +localeTitle: Hacer imágenes circulares con un radio de borde --- ## Description -
-Además de los píxeles, también puede especificar el border-radius del border-radius usando un porcentaje. -
+
Además de los píxeles, también puede especificar el border-radius del border-radius usando un porcentaje.
## Instructions -
-Dale a tu foto de gato un border-radius de border-radius del 50% . -
+
Dale a tu foto de gato un border-radius de border-radius del 50% .
## Tests
```yml tests: - - text: "Su imagen debe tener un radio de borde del 50% , por lo que es perfectamente circular". + - text: 'Su imagen debe tener un radio de borde del 50% , por lo que es perfectamente circular.' testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Your image should have a border radius of 50%, making it perfectly circular.");' - text: Asegúrese de utilizar un valor porcentual del 50% . testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of 50%.");' @@ -94,6 +90,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md index 8ce099eec8..d823ae0e1f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.spanish.md @@ -1,25 +1,16 @@ --- id: bad87fee1348bd9aedf07756 title: Override All Other Styles by using Important -localeTitle: Anular todos los otros estilos usando Importante challengeType: 0 videoUrl: '' +localeTitle: Anular todos los otros estilos usando Importante --- ## Description -
-Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de style . -Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS. -En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usar !important -Volvamos a nuestra declaración de clase de pink-text . Recuerde que nuestra clase de pink-text fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea. -
+
¡Hurra! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de style . Pero espera. Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, hablemos de por qué querría anular CSS. En muchas situaciones, usarás bibliotecas CSS. Estos pueden anular accidentalmente su propio CSS. Entonces, cuando necesite estar absolutamente seguro de que un elemento tiene un CSS específico, puede usarlo !important Volvamos a nuestra declaración de clase de pink-text . Recuerde que nuestra clase de pink-text fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea.
## Instructions -
-¡Agreguemos la palabra clave !important para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento h1 será rosa. -Un ejemplo de cómo hacer esto es: -color: red !important; -
+
Agreguemos la palabra clave !important para la declaración de color de su elemento de texto rosa para asegurarnos al 100% de que su elemento h1 será rosa. Un ejemplo de cómo hacer esto es: color: red !important;
## Tests
@@ -32,7 +23,7 @@ tests: testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");' - text: Su elemento h1 debe tener el ID de orange-text . testString: 'assert($("h1").attr("id") === "orange-text", "Your h1 element should have the id of orange-text.");' - - text: 'Su elemento h1 debe tener el estilo de color: white ' + - text: 'Su elemento h1 debe tener el estilo de color: white .' testString: 'assert(code.match(/h1 element should have the inline style of color: white.");' - text: Su declaración de clase de pink-text debe tener la palabra clave !important para anular todas las demás declaraciones. testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your pink-text class declaration should have the !important keyword to override all other declarations.");' @@ -66,6 +57,7 @@ tests: }

Hello World!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md index d68dbf07e4..d761678b12 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.spanish.md @@ -1,27 +1,16 @@ --- id: bad87fee1348bd8aedf06756 title: Override Class Declarations by Styling ID Attributes -localeTitle: Anular declaraciones de clase por atributos de ID de estilo challengeType: 0 videoUrl: '' +localeTitle: Anular declaraciones de clase por atributos de ID de estilo --- ## Description -
-Acabamos de demostrar que los navegadores leen CSS de arriba a abajo. Eso significa que, en caso de conflicto, el navegador utilizará la declaración de CSS que haya sido la última. -Pero aún no hemos terminado. Hay otras formas en que puedes anular CSS. ¿Recuerdas los atributos de identificación? -Anulemos sus clases de blue-text pink-text blue-text , y hagamos que su elemento h1 naranja, asignando una identificación al elemento h1 y luego diseñando un estilo. -
+
Acabamos de demostrar que los navegadores leen CSS de arriba a abajo. Eso significa que, en caso de conflicto, el navegador utilizará la declaración de CSS que haya sido la última. Pero aún no hemos terminado. Hay otras formas en que puedes anular CSS. ¿Recuerdas los atributos de identificación? Anulemos sus clases de blue-text pink-text blue-text , y hagamos que su elemento h1 naranja, asignando una identificación al elemento h1 y luego diseñando ese tipo de identificación.
## Instructions -
-Dale a tu elemento h1 el atributo id del orange-text . Recuerde, los estilos de identificación se ven así: -<h1 id="orange-text"> -Deje las clases de pink-text blue-text pink-text en su elemento h1 . -Cree una declaración CSS para su ID de orange-text en su elemento de style . Aquí hay un ejemplo de cómo se ve esto: -
#brown-text {
  color: brown;
}
-Nota: No importa si declara este CSS por encima o por debajo de la clase de texto rosado, ya que el atributo id siempre tendrá prioridad. -
+
Dale a tu elemento h1 el atributo id del orange-text . Recuerde, los estilos de identificación tienen este aspecto: <h1 id="orange-text"> Deje las clases de pink-text blue-text y pink-text en su elemento h1 . Cree una declaración CSS para su ID de orange-text en su elemento de style . Aquí hay un ejemplo de cómo se ve esto:
# texto marrón {
color marrón;
}
Nota: No importa si declara este CSS por encima o por debajo de la clase de texto rosado, ya que el atributo id siempre tendrá prioridad.
## Tests
@@ -67,6 +56,7 @@ tests: }

Hello World!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md index 79827a8ed1..8c403529ae 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9aedf06756 title: Override Class Declarations with Inline Styles -localeTitle: Anular declaraciones de clase con estilos en línea challengeType: 0 videoUrl: '' +localeTitle: Anular declaraciones de clase con estilos en línea --- ## Description -
-Por lo tanto, hemos comprobado que las declaraciones de identificación anulan las declaraciones de clase, independientemente de dónde estén declaradas en su elemento de style CSS. -Hay otras formas en que puede anular CSS. ¿Recuerdas los estilos en línea? -
+
Así que hemos comprobado que las declaraciones de identificación anulan las declaraciones de clase, independientemente de dónde se declaren en su elemento de style CSS. Hay otras formas en que puedes anular CSS. ¿Recuerdas los estilos en línea?
## Instructions -
-Use un inline style para tratar de hacer que nuestro elemento h1 blanco. Recuerde, los estilos de línea se ven así: -<h1 style="color: green;"> -Deje las clases de pink-text blue-text pink-text en su elemento h1 . -
+
Use un inline style para tratar de hacer que nuestro elemento h1 blanco. Recuerde, los estilos de línea se ven así: <h1 style="color: green;"> Deje las clases de pink-text blue-text y pink-text en su elemento h1 .
## Tests
@@ -62,6 +55,7 @@ tests: }

Hello World!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md index b54927ef31..2054fb5d30 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.spanish.md @@ -1,26 +1,16 @@ --- id: bad87fee1348bd9aedf04756 title: Override Styles in Subsequent CSS -localeTitle: Anular estilos en CSS subsiguiente challengeType: 0 videoUrl: '' +localeTitle: Anular estilos en CSS subsiguiente --- ## Description -
-Nuestra clase de "texto rosa" anuló la declaración CSS de nuestro elemento de body ! -Acabamos de demostrar que nuestras clases anularán el CSS del elemento del body . Entonces, la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase de pink-text ? -
+
Nuestra clase de "texto rosa" anuló la declaración CSS de nuestro elemento de body . Acabamos de demostrar que nuestras clases anularán el CSS del elemento body . Entonces, la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase de pink-text ?
## Instructions -
-Crea una clase CSS adicional llamada blue-text que le da a un elemento el color azul. Asegúrate de que esté debajo de tu declaración de clase de pink-text . -Aplique la clase de blue-text a su elemento h1 además de su clase de pink-text , y veamos cuál gana. -aplicación de múltiples atributos de clase a un elemento HTML se realiza con un espacio entre ellos como este: -class="class1 class2" -Nota: No importa en qué orden se enumeran las clases en el elemento HTML. -Sin embargo, lo que es importante es el orden de las declaraciones de class en la sección <style> . La segunda declaración siempre tendrá prioridad sobre la primera. Como .blue-text se declara en segundo lugar, anula los atributos de .pink-text -
+
Cree una clase CSS adicional llamada blue-text que le dé a un elemento el color azul. Asegúrate de que esté debajo de tu declaración de clase de pink-text . Aplique la clase de blue-text a su elemento h1 además de su clase de pink-text , y veamos cuál gana. La aplicación de múltiples atributos de clase a un elemento HTML se realiza con un espacio entre ellos como este: class="class1 class2" Nota: No importa en qué orden se enumeran las clases en el elemento HTML. Sin embargo, lo que es importante es el orden de las declaraciones de class en la sección <style> . La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que .blue-text se declara segundo, anula los atributos de .pink-text
## Tests
@@ -57,6 +47,7 @@ tests: }

Hello World!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md index 9f4ea92c89..28d0f0c15d 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/prioritize-one-style-over-another.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9aedf08756 title: Prioritize One Style Over Another -localeTitle: Priorizar un estilo sobre otro challengeType: 0 videoUrl: '' +localeTitle: Priorizar un estilo sobre otro --- ## Description -
-A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. -Por ejemplo, su elemento h1 no puede ser verde y rosa al mismo tiempo. -Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase anulará el color: green; del elemento del body color: green; Propiedad CSS? -
+
A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. Por ejemplo, su elemento h1 no puede ser verde y rosa al mismo tiempo. Veamos qué sucede cuando creamos una clase que hace que el texto sea rosa, luego lo aplicamos a un elemento. ¿Nuestra clase anulará el color: green; del elemento del body color: green; Propiedad CSS?
## Instructions -
-Crea una clase CSS llamada pink-text que le da a un elemento el color rosa. -Dale a tu elemento h1 la clase de pink-text . -
+
Crea una clase de CSS llamada pink-text que le da a un elemento el color rosa. Dale a tu elemento h1 la clase de pink-text .
## Tests
@@ -26,7 +19,7 @@ Dale a tu elemento h1 la clase de pink-text . tests: - text: Su elemento h1 debe tener la clase pink-text . testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");' - - text: 'Tu <style> debe tener una clase de CSS de pink-text que cambie el color .' + - text: Su <style> debe tener una clase de CSS de pink-text que cambie el color . testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <style> should have a pink-text CSS class that changes the color.");' - text: Tu elemento h1 debe ser rosa. testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your h1 element should be pink.");' @@ -49,6 +42,7 @@ tests: }

Hello World!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md index e8ad5f7476..3d483b1595 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.spanish.md @@ -1,22 +1,16 @@ --- id: bad87fee1348bd9aede08807 title: Set the Font Family of an Element -localeTitle: Establecer la familia de fuentes de un elemento challengeType: 0 videoUrl: '' +localeTitle: Establecer la familia de fuentes de un elemento --- ## Description -
-Puede establecer qué fuente debe usar un elemento, usando la propiedad font-family . -Por ejemplo, si quisiera establecer la fuente de su elemento h2 en sans-serif , usaría el siguiente CSS: -
h2 {
  font-family: sans-serif;
}
-
+
Puede establecer qué fuente debe usar un elemento, usando la propiedad de font-family . Por ejemplo, si quisiera establecer la fuente de su elemento h2 en sans-serif , usaría el siguiente CSS:
h2 {
Familia tipográfica: sans-serif;
}
## Instructions -
-Haz que todos tus elementos p usen la fuente monospace . -
+
Haz que todos tus elementos p utilicen la fuente monospace .
## Tests
@@ -77,6 +71,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md index 148bb4a1b0..3c0e015ec9 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/set-the-id-of-an-element.spanish.md @@ -1,25 +1,16 @@ --- id: bad87eee1348bd9aede07836 title: Set the id of an Element -localeTitle: Establecer la id de un elemento challengeType: 0 videoUrl: '' +localeTitle: Establecer la id de un elemento --- ## Description -
-Además de las clases, cada elemento HTML también puede tener un atributo id . -Existen varios beneficios de usar atributos de id : puede usar una id para diseñar un solo elemento y más adelante aprenderá que puede usarlos para seleccionar y modificar elementos específicos con JavaScript. -atributos de -id deben ser únicos. Los navegadores no harán cumplir esto, pero es una buena práctica ampliamente aceptada. Entonces, por favor, no le dé a más de un elemento el mismo atributo de id . -Aquí hay un ejemplo de cómo le das a tu elemento h2 el ID de cat-photo-app : -<h2 id="cat-photo-app"> -
+
Además de las clases, cada elemento HTML también puede tener un atributo id . El uso de atributos de id tiene varios beneficios: puede usar una id para diseñar un solo elemento y más adelante aprenderá que puede usarlos para seleccionar y modificar elementos específicos con JavaScript. id atributos de id deben ser únicos. Los navegadores no harán cumplir esto, pero es una buena práctica ampliamente aceptada. Entonces, por favor, no le dé a más de un elemento el mismo atributo de id . Aquí hay un ejemplo de cómo le das a tu elemento h2 el ID de cat-photo-app : <h2 id="cat-photo-app">
## Instructions -
-Dale a tu elemento de form la identificación cat-photo-form . -
+
Dale a tu elemento de form la identificación cat-photo-form .
## Tests
@@ -101,6 +92,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md index 4ac32d2a42..43a846e823 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/size-your-images.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9acdf08812 title: Size Your Images -localeTitle: Tamaño de sus imágenes challengeType: 0 videoUrl: '' +localeTitle: Tamaño de sus imágenes --- ## Description -
-CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con las fuentes, usaremos px (píxeles) para especificar el ancho de la imagen. -Por ejemplo, si quisiéramos crear una clase CSS llamada larger-image que diera a los elementos HTML un ancho de 500 píxeles, usaríamos: -
<style>
  .larger-image {
    width: 500px;
  }
</style>
-
+
CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con las fuentes, usaremos px (píxeles) para especificar el ancho de la imagen. Por ejemplo, si quisiéramos crear una clase CSS llamada larger-image que diera a los elementos HTML un ancho de 500 píxeles, usaríamos:
<estilo>
.larger-image {
ancho: 500px;
}
</style>
## Instructions -
-Cree una clase llamada smaller-image y utilícela para cambiar el tamaño de la imagen de modo que tenga solo 100 píxeles de ancho. -Nota
Debido a las diferencias de implementación del navegador, es posible que tenga que estar al 100% del zoom para pasar las pruebas en este desafío. -
+
Cree una clase llamada smaller-image y utilícela para cambiar el tamaño de la imagen de modo que tenga solo 100 píxeles de ancho. Nota
Debido a las diferencias de implementación del navegador, es posible que tenga que estar al 100% del zoom para pasar las pruebas en este desafío.
## Tests
@@ -86,6 +79,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md index 70e47881a8..a480bab91c 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.spanish.md @@ -1,26 +1,16 @@ --- id: bad87fee1348bd9aedf08808 title: Specify How Fonts Should Degrade -localeTitle: Especifique cómo deben degradarse las fuentes challengeType: 0 videoUrl: '' +localeTitle: Especifique cómo deben degradarse las fuentes --- ## Description -
-Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen monospace , serif y sans-serif -Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente. -Por ejemplo, si deseaba que un elemento usara la fuente Helvetica , pero se degradara a la sans-serif cuando Helvetica no estaba disponible, la especificará de la siguiente manera: -
p {
  font-family: Helvetica, sans-serif;
}
-Los nombres genéricos de familia de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS. -
+
Hay varias fuentes predeterminadas que están disponibles en todos los navegadores. Estas familias de fuentes genéricas incluyen monospace , serif y sans-serif Cuando una fuente no está disponible, puede indicar al navegador que se "degrade" a otra fuente. Por ejemplo, si deseaba que un elemento usara la fuente Helvetica , pero se degradara a la sans-serif cuando Helvetica no estaba disponible, lo especificará de la siguiente manera:
pag {
Familia tipográfica: Helvetica, sans-serif;
}
Los nombres genéricos de las familias de fuentes no distinguen entre mayúsculas y minúsculas. Además, no necesitan comillas porque son palabras clave CSS.
## Instructions -
-Para empezar, aplique la fuente monospace al elemento h2 , de modo que ahora tenga dos fuentes: Lobster y monospace . -En el último desafío, importó la fuente Lobster usando la etiqueta de link . Ahora comente la importación de la fuente Lobster (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento h2 se degrada a la fuente monospace . -Nota
Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente. -
+
Para empezar, aplique la fuente monospace al elemento h2 , de modo que ahora tenga dos fuentes: Lobster y monospace . En el último desafío, importó la fuente Lobster usando la etiqueta de link . Ahora comente la importación de la fuente Lobster (utilizando los comentarios HTML que aprendió anteriormente) de Google Fonts para que ya no esté disponible. Observe cómo su elemento h2 se degrada a la fuente monospace . Nota
Si tiene la fuente Lobster instalada en su computadora, no verá la degradación porque su navegador puede encontrar la fuente.
## Tests
@@ -31,9 +21,9 @@ tests: testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font Lobster.");' - text: Su elemento h2 debería degradarse a la fuente monospace cuando Lobster no está disponible. testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font monospace when Lobster is not available.");' - - text: Comente su llamada a Google para la fuente Lobster colocando <!-- delante de ella. ' + - text: Comente su llamada a Google para la fuente Lobster colocando <!-- delante de ella. testString: 'assert(new RegExp("", "gi").test(code), "Be sure to close your comment by adding -->.");' ``` @@ -93,6 +83,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md index 8d03cd1fac..a565d4b81f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.spanish.md @@ -1,19 +1,16 @@ --- id: bad87fee1348bd9aefe08806 title: Style Multiple Elements with a CSS Class -localeTitle: Estilo de elementos múltiples con una clase CSS challengeType: 0 videoUrl: '' +localeTitle: Estilo de elementos múltiples con una clase CSS --- ## Description -
-Las clases le permiten usar los mismos estilos CSS en varios elementos HTML. Puedes ver esto aplicando tu clase de red-text al primer elemento p . -
+
Las clases le permiten usar los mismos estilos CSS en varios elementos HTML. Puedes ver esto aplicando tu clase de red-text al primer elemento p .
## Instructions -
- +
## Tests @@ -79,6 +76,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md index 0522e886a5..aab3d58e80 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/style-the-html-body-element.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9aedf08736 title: Style the HTML Body Element -localeTitle: Estilo del elemento HTML del cuerpo challengeType: 0 videoUrl: '' +localeTitle: Estilo del elemento HTML del cuerpo --- ## Description -
-Ahora comencemos de nuevo y hablemos de la herencia CSS. -Cada página HTML tiene un elemento de body . -
+
Ahora comencemos de nuevo y hablemos de la herencia CSS. Cada página HTML tiene un elemento de body .
## Instructions -
-Podemos probar que el elemento del body existe aquí dándole un background-color de background-color de negro. -Podemos hacer esto agregando lo siguiente a nuestro elemento de style : -
body {
  background-color: black;
}
-
+
Podemos probar que el elemento del body existe aquí dándole un background-color de background-color de negro. Podemos hacer esto agregando lo siguiente a nuestro elemento de style :
cuerpo {
color de fondo: negro;
}
## Tests
@@ -44,6 +37,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md index 5cebf59223..d620d1dff6 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.spanish.md @@ -1,23 +1,16 @@ --- id: bad82fee1322bd9aedf08721 title: Understand Absolute versus Relative Units -localeTitle: Comprender unidades absolutas versus unidades relativas challengeType: 0 videoUrl: '' +localeTitle: Comprender unidades absolutas versus unidades relativas --- ## Description -
-Los últimos varios desafíos establecen el margen o el relleno de un elemento con píxeles ( px ). Los píxeles son un tipo de unidad de longitud, que es lo que le dice al navegador cómo dimensionar o espaciar un elemento. Además de px , CSS tiene una serie de opciones de unidades de longitud diferentes que puede utilizar. -Los dos tipos principales de unidades de longitud son absolutos y relativos. Unidades absolutas vinculadas a unidades físicas de longitud. Por ejemplo, in y mm refieren a pulgadas y milímetros, respectivamente. Las unidades de longitud absoluta se aproximan a la medida real en una pantalla, pero hay algunas diferencias según la resolución de la pantalla. -Las unidades relativas, como em o rem , son relativas a otro valor de longitud. Por ejemplo, em se basa en el tamaño de la fuente de un elemento. Si lo usa para establecer la propiedad de font-size sí, es relativo al font-size de font-size . -Nota
Hay varias opciones de unidades relativas que están vinculadas al tamaño de la ventana gráfica. Están cubiertos en la sección Principios de diseño web responsivo. -
+
Los últimos varios desafíos establecen el margen o el relleno de un elemento con píxeles ( px ). Los píxeles son un tipo de unidad de longitud, que es lo que le dice al navegador cómo dimensionar o espaciar un elemento. Además de px , CSS tiene una serie de opciones de unidades de longitud diferentes que puede utilizar. Los dos tipos principales de unidades de longitud son absolutos y relativos. Unidades absolutas vinculadas a unidades físicas de longitud. Por ejemplo, in y mm refieren a pulgadas y milímetros, respectivamente. Las unidades de longitud absoluta se aproximan a la medida real en una pantalla, pero hay algunas diferencias según la resolución de la pantalla. Las unidades relativas, como em o rem , son relativas a otro valor de longitud. Por ejemplo, em se basa en el tamaño de la fuente de un elemento. Si lo usa para establecer la propiedad de font-size sí, es relativo al font-size de font-size . Nota
Hay varias opciones de unidades relativas que están vinculadas al tamaño de la ventana gráfica. Están cubiertos en la sección Principios de diseño web responsivo.
## Instructions -
-Agregue una propiedad de padding al elemento con la clase red-box y 1.5em a 1.5em . -
+
Agregue una propiedad de padding al elemento con la clase red-box y 1.5em a 1.5em .
## Tests
@@ -74,6 +67,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md index cd691b9680..d49799735c 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.spanish.md @@ -1,27 +1,16 @@ --- id: bad87fee1348bd9aecf08806 title: Use a CSS Class to Style an Element -localeTitle: Usa una clase CSS para diseñar un elemento challengeType: 0 videoUrl: '' +localeTitle: Usa una clase CSS para diseñar un elemento --- ## Description -
-Las clases son estilos reutilizables que se pueden agregar a elementos HTML. -Aquí hay un ejemplo de declaración de clase CSS: -
<style>
  .blue-text {
    color: blue;
  }
</style>
-Puede ver que hemos creado una clase CSS llamada blue-text dentro de la etiqueta <style> . -Puede aplicar una clase a un elemento HTML como este: -<h2 class="blue-text">CatPhotoApp</h2> -Tenga en cuenta que en su elemento de style CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período. -
+
Las clases son estilos reutilizables que se pueden agregar a elementos HTML. Aquí hay un ejemplo de declaración de clase CSS:
<estilo>
.blue-text {
color azul;
}
</style>
Puede ver que hemos creado una clase CSS llamada blue-text dentro de la etiqueta <style> . Puede aplicar una clase a un elemento HTML como este: <h2 class="blue-text">CatPhotoApp</h2> Tenga en cuenta que en su elemento de style CSS, los nombres de clase comienzan con un punto. En el atributo de clase de los elementos HTML, el nombre de la clase no incluye el período.
## Instructions -
-Dentro de su elemento de style , cambie el selector h2 a .red-text y actualice el valor del blue de blue a red . -Asigne a su elemento h2 el atributo de class con un valor de 'red-text' . -
+
Dentro de su elemento de style , cambie el selector h2 a .red-text y actualice el valor del blue de blue a red . Déle a su elemento h2 el atributo de class con un valor de 'red-text' .
## Tests
@@ -34,7 +23,7 @@ tests: testString: 'assert($("h2").hasClass("red-text"), "Your h2 element should have the class red-text.");' - text: Su hoja de estilo debe declarar una clase de red-text y tener su color establecido en rojo. testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a red-text class and have its color set to red.");' - - text: 'No utilice declaraciones de estilo en línea como style="color: red" en su elemento h2 .' + - text: 'No use declaraciones de estilo en línea como style="color: red" en su elemento h2 .' testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like style="color: red" in your h2 element.");' ``` @@ -84,6 +73,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md index f31eca4132..fa319ccdfb 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-custom-css-variable.spanish.md @@ -1,23 +1,16 @@ --- id: 5a9d727a424fe3d0e10cad12 title: Use a custom CSS Variable -localeTitle: Use una variable CSS personalizada challengeType: 0 videoUrl: '' +localeTitle: Use una variable CSS personalizada --- ## Description -
-Después de crear su variable, puede asignar su valor a otras propiedades de CSS haciendo referencia al nombre que le dio. -
background: var(--penguin-skin);
-Esto cambiará el fondo de cualquier elemento que estés apuntando a gris porque ese es el valor de la variable --penguin-skin . -Tenga en cuenta que los estilos no se aplicarán a menos que los nombres de las variables coincidan exactamente. -
+
Después de crear su variable, puede asignar su valor a otras propiedades de CSS haciendo referencia al nombre que le dio.
fondo: var (- piel de pingüino);
Esto cambiará el fondo de cualquier elemento que estés apuntando a gris porque ese es el valor de la variable --penguin-skin . Tenga en cuenta que los estilos no se aplicarán a menos que los nombres de las variables coincidan exactamente.
## Instructions -
-Aplique la variable --penguin-skin a la propiedad de background de las clases penguin-top , penguin-bottom , right-hand y left-hand . -
+
Aplique la variable --penguin-skin a la propiedad de background de las clases penguin-top , penguin-bottom , right-hand y left-hand .
## Tests
@@ -253,6 +246,7 @@ tests:
+ ``` @@ -264,9 +258,7 @@ tests: ## Solution
- ```js -var code = ".penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md index a7fcf0d791..33a8bc9b9b 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.spanish.md @@ -1,30 +1,25 @@ --- id: 5a9d72ad424fe3d0e10cad16 title: Use a media query to change a variable -localeTitle: Usa una consulta de medios para cambiar una variable challengeType: 0 videoUrl: '' +localeTitle: Usa una consulta de medios para cambiar una variable --- ## Description -
-Las variables CSS pueden simplificar la forma en que utiliza las consultas de medios. -Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use. -
+
Las Variables CSS pueden simplificar la forma en que utiliza las consultas de medios. Por ejemplo, cuando su pantalla es más pequeña o más grande que el punto de interrupción de su consulta de medios, puede cambiar el valor de una variable y aplicará su estilo donde sea que se use.
## Instructions -
-En el :root selector de :root de la media query , cámbielo para que --penguin-size se redefina y se le dé un valor de 200px . Además, redefine --penguin-skin y dale un valor de black . Luego cambie el tamaño de la vista previa para ver este cambio en acción. -
+
En el :root selector de :root de la media query , cámbielo para que --penguin-size se redefina y se le dé un valor de 200px . Además, redefine --penguin-skin y dale un valor de black . Luego cambie el tamaño de la vista previa para ver este cambio en acción.
## Tests
```yml tests: - - text: ' :root debe reasignar la variable --penguin-size a 200px .' + - text: ':root debe reasignar la variable --penguin-size a 200px .' testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-size variable to 200px.");' - - text: ' :root debería reasignar la variable --penguin-skin a black ' + - text: ':root debe reasignar la variable --penguin-skin a black .' testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ":root should reassign the --penguin-skin variable to black.");' ``` @@ -267,6 +262,7 @@ tests:
+ ``` @@ -278,9 +274,7 @@ tests: ## Solution
- ```js -var code = "@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md index d0c5add338..3bd837c864 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-abbreviated-hex-code.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9aedf08719 title: Use Abbreviated Hex Code -localeTitle: Use el código hexadecimal abreviado challengeType: 0 videoUrl: '' +localeTitle: Use el código hexadecimal abreviado --- ## Description -
-Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo. -Por ejemplo, el código hexadecimal de rojo #FF0000 se puede acortar a #F00 . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. -Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente del mismo color. -
+
Muchas personas se sienten abrumadas por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente, puedes acortarlo. Por ejemplo, el código hexadecimal de rojo #FF0000 puede #FF0000 a #F00 . Esta forma abreviada proporciona un dígito para el rojo, un dígito para el verde y un dígito para el azul. Esto reduce el número total de colores posibles a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente del mismo color.
## Instructions -
-Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos. -
Color Código hexadecimal corto
Cian #0FF
Verde #0F0
rojo #F00
Fucsia #F0F
-
+
Adelante, intente usar los códigos hexadecimales abreviados para colorear los elementos correctos.
Color Código hexadecimal corto
Cian #0FF
Verde #0F0
rojo #F00
Fucsia #F0F
## Tests
@@ -34,11 +27,11 @@ tests: testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated hex code for the color green instead of the hex code #00FF00.");' - text: ¡Da tu elemento h1 con el texto I am cyan! El color cian. testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your h1 element with the text I am cyan! the color cyan.");' - - text: 'Use el hex code abreviado para el color cian en lugar del código hexadecimal #00FFFF ' + - text: 'Use el hex code abreviado para el color cian en lugar del código hexadecimal #00FFFF .' testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated hex code for the color cyan instead of the hex code #00FFFF.");' - text: ¡Da tu elemento h1 con el texto I am fuchsia! El color fucsia. testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your h1 element with the text I am fuchsia! the color fuchsia.");' - - text: 'Use el hex code abreviado para el color fucsia en lugar del código hexadecimal #FF00FF ' + - text: 'Utilice el hex code abreviado para el color fucsia en lugar del código hexadecimal #FF00FF .' testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated hex code for the color fuchsia instead of the hex code #FF00FF.");' ``` @@ -73,6 +66,7 @@ tests:

I am cyan!

I am green!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md index a9db207ace..1538f2076e 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.spanish.md @@ -1,24 +1,16 @@ --- id: bad87dee1348bd9aede07836 title: Use an id Attribute to Style an Element -localeTitle: Use un atributo de ID para diseñar un elemento challengeType: 0 videoUrl: '' +localeTitle: Use un atributo de ID para diseñar un elemento --- ## Description -
-Una cosa interesante acerca de los atributos de id es que, al igual que las clases, puedes aplicarles un estilo usando CSS. -Sin embargo, una id no es reutilizable y solo debe aplicarse a un elemento. Una id también tiene una mayor especificidad (importancia) que una clase, por lo que si ambas se aplican al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos de la id . -Aquí hay un ejemplo de cómo puedes tomar tu elemento con el atributo id de cat-photo-element y darle el color de fondo de verde. En su elemento de style : -
#cat-photo-element {
  background-color: green;
}
-Tenga en cuenta que dentro de su elemento de style , siempre hace referencia a las clases poniendo un . delante de sus nombres. Siempre hace referencia a los identificadores colocando un # delante de sus nombres. -
+
Una cosa interesante acerca de los atributos de id es que, al igual que las clases, puedes aplicarles un estilo usando CSS. Sin embargo, una id no es reutilizable y solo debe aplicarse a un elemento. Una id también tiene una mayor especificidad (importancia) que una clase, por lo que si ambas se aplican al mismo elemento y tienen estilos en conflicto, se aplicarán los estilos de la id . Este es un ejemplo de cómo puede tomar su elemento con el atributo id de cat-photo-element y darle el color de fondo de verde. En su elemento de style :
# cat-photo-element {
color de fondo: verde;
}
Tenga en cuenta que dentro de su elemento de style , siempre hace referencia a las clases poniendo un . delante de sus nombres. Siempre hace referencia a los identificadores colocando un # delante de sus nombres.
## Instructions -
-Intente darle a su formulario, que ahora tiene el atributo id de cat-photo-form , un fondo verde. -
+
Intente darle a su formulario, que ahora tiene el atributo id de cat-photo-form , un fondo verde.
## Tests
@@ -106,6 +98,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md index f34ebf934d..79201dd1c9 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.spanish.md @@ -1,23 +1,16 @@ --- id: 58c383d33e2e3259241f3076 title: Use Attribute Selectors to Style Elements -localeTitle: Usar selectores de atributos para elementos de estilo challengeType: 0 videoUrl: '' +localeTitle: Usar selectores de atributos para elementos de estilo --- ## Description -
-Ha estado asignando atributos de id o class a los elementos que desea diseñar específicamente. Estos son conocidos como ID y selectores de clase. Hay otros selectores de CSS que puede usar para seleccionar grupos personalizados de elementos para personalizar. -Veamos nuevamente CatPhotoApp para practicar el uso de los selectores de CSS. -Para este desafío, utilizará el selector de atributo [attr=value] para diseñar las casillas de verificación en CatPhotoApp. Este selector combina y diseña elementos con un valor de atributo específico. Por ejemplo, el código siguiente cambia los márgenes de todos los elementos con el type atributo y el valor de radio correspondiente: -
[type='radio'] {
  margin: 20px 0px 20px 0px;
}
-
+
Ha estado asignando atributos de id o class a los elementos que desea diseñar específicamente. Estos son conocidos como ID y selectores de clase. Hay otros selectores de CSS que puede usar para seleccionar grupos personalizados de elementos para personalizar. Vamos a sacar CatPhotoApp de nuevo para practicar el uso de los selectores de CSS. Para este desafío, utilizará el selector de atributo [attr=value] para diseñar las casillas de verificación en CatPhotoApp. Este selector combina y diseña elementos con un valor de atributo específico. Por ejemplo, el código siguiente cambia los márgenes de todos los elementos con el type atributo y el valor de radio correspondiente:
[tipo = 'radio'] {
margen: 20px 0px 20px 0px;
}
## Instructions -
-Con el selector de atributos de type , intente dar a las casillas de verificación en CatPhotoApp un margen superior de 10 px y un margen inferior de 15 px. -
+
Con el selector de atributos de type , intente dar a las casillas de verificación en CatPhotoApp un margen superior de 10 px y un margen inferior de 15 px.
## Tests
@@ -103,6 +96,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md index a2bb234c66..c6fd8a789a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9afdf08726 title: Use Clockwise Notation to Specify the Margin of an Element -localeTitle: Usar la notación de las agujas del reloj para especificar el margen de un elemento challengeType: 0 videoUrl: '' +localeTitle: Usar la notación de las agujas del reloj para especificar el margen de un elemento --- ## Description -
-Intentemos esto de nuevo, pero con margin esta vez. -En lugar de especificar individualmente las propiedades margin-top , margin-right , margin-bottom y margin-left un elemento, puede especificarlas todas en una línea, como esta: -margin: 10px 20px 10px 20px; -Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de margen específicas para cada lado. -
+
Intentemos esto de nuevo, pero con margin esta vez. En lugar de especificar individualmente las propiedades margin-top , margin-right , margin-bottom y margin-left un elemento, puede especificarlas todas en una línea, como esta: margin: 10px 20px 10px 20px; Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de margen específicas para cada lado.
## Instructions -
-Use la Clockwise Notation para dar al elemento con la clase de blue-box un margen de 40px en su parte superior e izquierda, pero solo 20 20px en su parte inferior derecha. -
+
Use la Clockwise Notation para dar al elemento con la clase de blue-box un margen de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
## Tests
@@ -78,6 +71,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md index b7353782f7..ee8b754993 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.spanish.md @@ -1,22 +1,16 @@ --- id: bad87fee1348bd9aedf08826 title: Use Clockwise Notation to Specify the Padding of an Element -localeTitle: Use la notación de las agujas del reloj para especificar el relleno de un elemento challengeType: 0 videoUrl: '' +localeTitle: Use la notación de las agujas del reloj para especificar el relleno de un elemento --- ## Description -
-En lugar de especificar las propiedades padding-top , padding-right , padding-bottom y padding-left individualmente, puede especificarlas todas en una línea, como esta: -padding: 10px 20px 10px 20px; -Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de relleno específicas para cada lado. -
+
En lugar de especificar las propiedades padding-top , padding-right , padding-bottom y padding-left individualmente, puede especificarlas todas en una línea, como esta: padding: 10px 20px 10px 20px; Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado que utilizando las instrucciones de relleno específicas para cada lado.
## Instructions -
-Use la notación de las agujas del reloj para darle a la clase ".blue-box" un padding de 40px en su parte superior e izquierda, pero solo 20px en su parte inferior y derecha. -
+
Use la notación de las agujas del reloj para darle a la clase ".blue-box" un padding de 40px en su lado superior e izquierdo, pero solo 20px en su lado inferior y derecho.
## Tests
@@ -79,6 +73,7 @@ tests:
padding
padding
+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md index b7c6f23a23..1d3446a69a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md @@ -1,27 +1,16 @@ --- id: bad87fee1348bd9aedf08805 title: Use CSS Selectors to Style Elements -localeTitle: Usar los selectores de CSS para elementos de estilo challengeType: 0 videoUrl: '' +localeTitle: Usar los selectores de CSS para elementos de estilo --- ## Description -
-Con CSS, hay cientos de properties CSS que puedes usar para cambiar la apariencia de un elemento en tu página. -Cuando ingresó <h2 style="color: red">CatPhotoApp</h2> , estaba diseñando ese elemento h2 individual con inline CSS , que significa Cascading Style Sheets . -Esa es una forma de especificar el estilo de un elemento, pero hay una mejor manera de aplicar CSS . -En la parte superior de su código, cree un bloque de style como este: -
<style>
</style>
-Dentro de ese bloque de estilo, puede crear un CSS selector para todos los elementos h2 . Por ejemplo, si desea que todos los elementos h2 sean rojos, debe agregar una regla de estilo que se vea así: -
<style>
  h2 {color: red;}
</style>
-Tenga en cuenta que es importante tener tanto la apertura como el cierre de llaves ( { y } ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento. -
+
Con CSS, hay cientos de properties de CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresó <h2 style="color: red">CatPhotoApp</h2> , estaba diseñando ese elemento h2 individual con inline CSS , que significa Cascading Style Sheets . Esa es una forma de especificar el estilo de un elemento, pero hay una mejor manera de aplicar CSS . En la parte superior de tu código, crea un bloque de style como este:
<estilo>
</style>
Dentro de ese bloque de estilo, puede crear un CSS selector para todos los elementos h2 . Por ejemplo, si desea que todos los elementos h2 sean rojos, debe agregar una regla de estilo que se vea así:
<estilo>
h2 {color: rojo;}
</style>
Tenga en cuenta que es importante tener llaves de apertura y cierre ( { y } ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento.
## Instructions -
-Borre el atributo de estilo de su elemento h2 y, en su lugar, cree un bloque de style CSS. Agrega el CSS necesario para convertir todos los elementos h2 azul. -
+
Borre el atributo de estilo del elemento h2 y, en su lugar, cree un bloque de style CSS. Agrega el CSS necesario para convertir todos los elementos h2 azul.
## Tests
@@ -80,6 +69,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md index 7e18d6792f..442ac794bf 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.spanish.md @@ -1,21 +1,16 @@ --- id: 5a9d725e424fe3d0e10cad10 title: Use CSS Variables to change several elements at once -localeTitle: Usa las variables CSS para cambiar varios elementos a la vez challengeType: 0 videoUrl: '' +localeTitle: Usa las variables CSS para cambiar varios elementos a la vez --- ## Description -
-Las Variables CSS son una forma poderosa de cambiar muchas propiedades de estilo CSS a la vez cambiando solo un valor. -Siga las instrucciones a continuación para ver cómo cambiar solo tres valores puede cambiar el estilo de muchos elementos. -
+
Las Variables CSS son una forma poderosa de cambiar muchas propiedades de estilo CSS a la vez cambiando solo un valor. Siga las instrucciones a continuación para ver cómo cambiar solo tres valores puede cambiar el estilo de muchos elementos.
## Instructions -
-En la clase de penguin , cambie el valor de black a gray , el valor de gray a white y el de yellow a orange . -
+
En la clase de penguin , cambie el valor de black a gray , el valor de gray a white y el de yellow a orange .
## Tests
@@ -239,6 +234,7 @@ tests:
+ ``` @@ -250,9 +246,7 @@ tests: ## Solution
- ```js -var code = ".penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}" +// solution required ``` -
diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md index 0036830d2c..03d2a8aa16 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.spanish.md @@ -1,23 +1,16 @@ --- id: bad87fee1348bd9aedf08726 title: Use Hex Code for Specific Colors -localeTitle: Use el código hexadecimal para colores específicos challengeType: 0 videoUrl: '' +localeTitle: Use el código hexadecimal para colores específicos --- ## Description -
-¿Sabías que hay otras formas de representar los colores en CSS? Una de estas formas se llama código hexadecimal, o hex code para abreviar. -Usualmente usamos decimals , o números de base 10, que usan los símbolos del 0 al 9 para cada dígito. Hexadecimals (o hex ) son números base 16. Esto significa que utiliza dieciséis símbolos distintos. Al igual que los decimales, los símbolos 0-9 representan los valores de cero a nueve. Luego, A, B, C, D, E, F representan los valores de diez a quince. En total, de 0 a F puede representar un dígito en hexadecimal , lo que nos da un total de 16 valores posibles. Puede encontrar más información sobre los números hexadecimales aquí . -En CSS, podemos usar 6 dígitos hexadecimales para representar los colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). Por ejemplo, #000000 es negro y también es el valor más bajo posible. Puede encontrar más información sobre el sistema de color RGB aquí . -
body {
  color: #000000;
}
-
+
¿Sabías que hay otras formas de representar los colores en CSS? Una de estas formas se llama código hexadecimal, o hex code para abreviar. Usualmente usamos decimals , o números de base 10, que usan los símbolos del 0 al 9 para cada dígito. Hexadecimals (o hex ) son números base 16. Esto significa que utiliza dieciséis símbolos distintos. Al igual que los decimales, los símbolos 0-9 representan los valores de cero a nueve. Luego, A, B, C, D, E, F representan los valores de diez a quince. En total, de 0 a F puede representar un dígito en hexadecimal , lo que nos da un total de 16 valores posibles. Puede encontrar más información sobre los números hexadecimales aquí . En CSS, podemos usar 6 dígitos hexadecimales para representar colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). Por ejemplo, #000000 es negro y también es el valor más bajo posible. Puede encontrar más información sobre el sistema de color RGB aquí .
cuerpo {
color: # 000000;
}
## Instructions -
-Reemplace la palabra black en el color de fondo de nuestro elemento del body con su representación en hex code , #000000 . -
+
Reemplace la palabra black en el color de fondo de nuestro elemento del body con su representación en hex code , #000000 .
## Tests
@@ -44,6 +37,7 @@ tests: background-color: black; } + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md index 15a9e18b69..680faae00a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.spanish.md @@ -1,25 +1,16 @@ --- id: bad87fee1348bd9aedf08721 title: Use Hex Code to Mix Colors -localeTitle: Usa el código hexadecimal para mezclar colores challengeType: 0 videoUrl: '' +localeTitle: Usa el código hexadecimal para mezclar colores --- ## Description -
-Para revisar, los códigos hexadecimales usan 6 dígitos hexadecimales para representar los colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). -De estos tres colores puros (rojo, verde y azul), podemos variar las cantidades de cada uno para crear más de 16 millones de otros colores! -Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde y sin azul. En código hexadecimal, esto se traduce en ser #FFA500 . -El dígito 0 es el número más bajo en código hexadecimal y representa una ausencia completa de color. -El dígito F es el número más alto en código hexadecimal y representa el brillo máximo posible. -
+
Para revisar, los códigos hexadecimales usan 6 dígitos hexadecimales para representar los colores, dos para cada uno de los componentes rojo (R), verde (G) y azul (B). ¡De estos tres colores puros (rojo, verde y azul), podemos variar las cantidades de cada uno para crear más de 16 millones de otros colores! Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde y sin azul. En código hexadecimal, esto se traduce en ser #FFA500 . El dígito 0 es el número más bajo en código hexadecimal y representa una ausencia completa de color. El dígito F es el número más alto en código hexadecimal y representa el brillo máximo posible.
## Instructions -
-Reemplace las palabras de color en nuestro elemento de style con sus códigos hexadecimales correctos. -
Color Código hexadecimal
Dodger Blue #1E90FF
Verde #00FF00
naranja #FFA500
rojo #FF0000
-
+
Reemplace las palabras de color en nuestro elemento de style con sus códigos hexadecimales correctos.
Color Código hexadecimal
Dodger Blue #1E90FF
Verde #00FF00
naranja #FFA500
rojo #FF0000
## Tests
@@ -75,6 +66,7 @@ tests:

I am dodger blue!

I am orange!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md index f2b276d122..92f60a6bd6 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.spanish.md @@ -1,21 +1,16 @@ --- id: bad82fee1348bd9aedf08721 title: Use RGB to Mix Colors -localeTitle: Usa RGB para mezclar colores challengeType: 0 videoUrl: '' +localeTitle: Usa RGB para mezclar colores --- ## Description -
-Al igual que con el código hexadecimal, puede mezclar colores en RGB utilizando combinaciones de diferentes valores. -
+
Al igual que con el código hexadecimal, puede mezclar colores en RGB utilizando combinaciones de diferentes valores.
## Instructions -
-Reemplace los códigos hexadecimales en nuestro elemento de style con sus valores RGB correctos. -
Color RGB
Azul rgb(0, 0, 255)
rojo rgb(255, 0, 0)
Orquídea rgb(218, 112, 214)
Tierra de siena rgb(160, 82, 45)
-
+
Reemplace los códigos hexadecimales en nuestro elemento de style con sus valores RGB correctos.
Color RGB
Azul rgb(0, 0, 255)
rojo rgb(255, 0, 0)
Orquídea rgb(218, 112, 214)
Tierra de siena rgb(160, 82, 45)
## Tests
@@ -71,6 +66,7 @@ tests:

I am sienna!

I am blue!

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md index a57ab86995..1bb69e78b3 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.spanish.md @@ -1,28 +1,16 @@ --- id: bad87fee1348bd9aede08718 title: Use RGB values to Color Elements -localeTitle: Usar valores RGB para elementos de color challengeType: 0 videoUrl: '' +localeTitle: Usar valores RGB para elementos de color --- ## Description -
-Otra forma de representar los colores en CSS es mediante el uso de valores RGB . -El valor RGB para negro se ve así: -rgb(0, 0, 0) -El valor RGB para blanco se ve así: -rgb(255, 255, 255) -En lugar de usar seis dígitos hexadecimales como lo hace con hexadecimal código, con RGB especifique el brillo de cada color con un número entre 0 y 255. -Si hace los cálculos, los dos dígitos de un color son 16 por 16, lo que nos da 256 valores totales. Entonces, RGB , que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal. -Aquí hay un ejemplo de cómo cambiarías el fondo del cuerpo a naranja usando su código RGB. -
body {
  background-color: rgb(255, 165, 0);
}
-
+
Otra forma de representar colores en CSS es mediante el uso de valores RGB . El valor RGB para negro se ve así: rgb(0, 0, 0) El valor RGB para blanco se ve así: rgb(255, 255, 255) En lugar de usar seis dígitos hexadecimales como lo hace con el código hexadecimal, con RGB usted Especifique el brillo de cada color con un número entre 0 y 255. Si hace los cálculos, los dos dígitos de un color son 16 veces 16, lo que nos da 256 valores totales. Entonces, RGB , que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal. Aquí hay un ejemplo de cómo cambiarías el fondo del cuerpo a naranja usando su código RGB.
cuerpo {
color de fondo: rgb (255, 165, 0);
}
## Instructions -
-Reemplazemos el código hexadecimal en el color de fondo de nuestro elemento del body con el valor RGB para negro: rgb(0, 0, 0) -
+
Reemplazemos el código hexadecimal en el color de fondo de nuestro elemento del body con el valor RGB para negro: rgb(0, 0, 0)
## Tests
@@ -49,6 +37,7 @@ tests: background-color: #F00; } + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md index 6a69451230..d5e5532056 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.spanish.md @@ -1,23 +1,17 @@ --- id: bad87fee1348bd9aedd08830 title: Add a Submit Button to a Form -localeTitle: Agregar un botón de envío a un formulario challengeType: 0 guideUrl: 'https://spanish.freecodecamp.org/guide/certificates/add-a-submit-button-to-a-form' videoUrl: '' +localeTitle: Agregar un botón de envío a un formulario --- ## Description -
-Agreguemos un botón de submit a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de action su formulario. -Aquí hay un ejemplo de botón de envío: -<button type="submit">this button submits the form</button> -
+
Agreguemos un botón de submit a su formulario. Al hacer clic en este botón, los datos de su formulario se enviarán a la URL que especificó con el atributo de action su formulario. Aquí hay un ejemplo de botón de envío: <button type="submit">this button submits the form</button>
## Instructions -
-Agregue un botón como el último elemento de su elemento de form con un tipo de submit y "Enviar" como texto. -
+
Agregue un botón como el último elemento de su elemento de form con un tipo de submit y "Enviar" como texto.
## Tests
@@ -26,11 +20,11 @@ Agregue un botón como el último elemento de su elemento de form c tests: - text: Su formulario debe tener un botón en su interior. testString: 'assert($("form").children("button").length > 0, "Your form should have a button inside it.");' - - text: El botón de envío debe tener el atributo type establecido en submit . + - text: Su botón de envío debe tener el type atributo establecido para submit . testString: 'assert($("button").attr("type") === "submit", "Your submit button should have the attribute type set to submit.");' - - text: Su botón de enviar solo debe tener el texto "Enviar." + - text: Su botón de enviar solo debe tener el texto "Enviar". testString: 'assert($("button").text().match(/^\s*submit\s*$/gi), "Your submit button should only have the text "Submit".");' - - text: Asegúrese de que su elemento button tenga una etiqueta de cierre. + - text: Asegúrese de que el elemento de su button tenga una etiqueta de cierre. testString: 'assert(code.match(/<\/button>/g) && code.match(/ + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/comment-out-html.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/comment-out-html.spanish.md index ce96f21766..ffac46345e 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/comment-out-html.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/comment-out-html.spanish.md @@ -1,21 +1,16 @@ --- id: bad87fee1348bd9aedf08804 title: Comment out HTML -localeTitle: Comentar fuera de HTML challengeType: 0 videoUrl: '' +localeTitle: Comentar fuera de HTML --- ## Description -
-Recuerde que para iniciar un comentario, debe usar <!-- y para finalizar un comentario, debe usar --> -Aquí deberá finalizar el comentario antes de que comience su elemento h2 . -
+
Recuerde que para iniciar un comentario, debe usar <!-- y para finalizar un comentario, debe usar --> Aquí deberá finalizar el comentario antes de que comience su elemento h2 .
## Instructions -
-Comente su elemento h1 y su elemento p , pero no su elemento h2 . -
+
Comente su elemento h1 y su elemento p , pero no su elemento h2 .
## Tests
@@ -28,7 +23,7 @@ tests: testString: 'assert(($("h2").length > 0), "Leave your h2 element uncommented so that it is visible on your page.");' - text: Comenta tu elemento p para que no se vea en tu página. testString: 'assert(($("p").length === 0), "Comment out your p element so that it is not visible on your page.");' - - text: 'Asegúrese de cerrar cada uno de sus comentarios con --> .' + - text: Asegúrese de cerrar cada uno de sus comentarios con --> . testString: 'assert(code.match(/[^fc]-->/g).length > 1, "Be sure to close each of your comments with -->.");' - text: No cambie el orden de h1 h2 o p en el código. testString: 'assert((code.match(/<([a-z0-9]){1,2}>/g)[0]==="

" && code.match(/<([a-z0-9]){1,2}>/g)[1]==="

" && code.match(/<([a-z0-9]){1,2}>/g)[2]==="

") , "Do not change the order of the h1 h2 or p in the code.");' @@ -50,6 +45,7 @@ tests:

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

--> + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.spanish.md index 68ba7dd957..8d3bf28c7a 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.spanish.md @@ -1,24 +1,16 @@ --- id: bad87fee1348bd9aedf08827 title: Create a Bulleted Unordered List -localeTitle: Crear una lista desordenada con viñetas challengeType: 0 videoUrl: '' +localeTitle: Crear una lista desordenada con viñetas --- ## Description -
-HTML tiene un elemento especial para crear unordered lists o listas de estilo de punto de viñeta. -listas desordenadas comienzan con un elemento <ul> apertura, seguido de cualquier número de elementos <li> . Finalmente, las listas desordenadas se cierran con un </ul> -Por ejemplo: -
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
-crearía una lista de estilo de punto de bala de "leche" y "queso". -
+
HTML tiene un elemento especial para crear unordered lists , o listas de estilo de punto de bala. Las listas desordenadas comienzan con un elemento <ul> apertura, seguido de cualquier número de elementos <li> . Por último, las listas no ordenadas se cierran con </ul> Por ejemplo:
<ul>
<li> leche </li>
<li> queso </li>
</ul>
crearía una lista de estilo de punto de bala de "leche" y "queso".
## Instructions -
-Elimine los dos últimos elementos p y cree una lista desordenada de tres cosas que los gatos adoran al final de la página. -
+
Elimina los dos últimos elementos p y crea una lista desordenada de tres cosas que los gatos adoran al final de la página.
## Tests
@@ -53,6 +45,7 @@ tests:

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

+ ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-form-element.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-form-element.spanish.md index fd5345693b..ee97ebbd3f 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-form-element.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-form-element.spanish.md @@ -1,22 +1,16 @@ --- id: bad87fee1348bd9aede08830 title: Create a Form Element -localeTitle: Crear un elemento de formulario challengeType: 0 videoUrl: '' +localeTitle: Crear un elemento de formulario --- ## Description -
-Puede crear formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacer esto especificando una acción en tu elemento de form . -Por ejemplo: -<form action="/url-where-you-want-to-submit-form-data"></form> -
+
Puede crear formularios web que en realidad envíen datos a un servidor usando nada más que HTML puro. Puedes hacer esto especificando una acción en tu elemento de form . Por ejemplo: <form action="/url-where-you-want-to-submit-form-data"></form>
## Instructions -
-Anide el campo de texto dentro de un elemento de form y agrega el atributo action="/submit-cat-photo" al elemento de formulario. -
+
Anida el campo de texto dentro de un elemento de form y agrega el atributo action="/submit-cat-photo" al elemento de formulario.
## Tests
@@ -60,6 +54,7 @@ tests: + ``` diff --git a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.spanish.md b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.spanish.md index 049b04aeaa..868281af78 100644 --- a/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.spanish.md +++ b/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.spanish.md @@ -1,26 +1,16 @@ --- id: bad87fee1348bd9aedf08835 title: Create a Set of Checkboxes -localeTitle: Crear un conjunto de casillas de verificación challengeType: 0 videoUrl: '' +localeTitle: Crear un conjunto de casillas de verificación --- ## Description -
-formularios suelen utilizar checkboxes de checkboxes para preguntas que pueden tener más de una respuesta. -casillas de verificación son un tipo de input -Cada una de sus casillas de verificación se puede anidar dentro de su propio elemento de label . Al ajustar un elemento de input dentro de un elemento de label , asociará automáticamente la entrada de la casilla de verificación con el elemento de etiqueta que lo rodea. -Todas las entradas de las casillas de verificación relacionadas deben tener el mismo atributo de name . -Se considera una buena práctica definir explícitamente la relación entre una input casilla de verificación y su label correspondiente estableciendo el atributo for en el elemento de label para que coincida con el atributo id del elemento de input asociado. -Aquí hay un ejemplo de una casilla de verificación: -<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label> -
+
Los formularios suelen utilizar checkboxes de checkboxes para preguntas que pueden tener más de una respuesta. Las casillas de verificación son un tipo de input Cada una de sus casillas de verificación se puede anidar dentro de su propio elemento de label . Al ajustar un elemento de input dentro de un elemento de label , asociará automáticamente la entrada de la casilla de verificación con el elemento de etiqueta que lo rodea. Todas las entradas de la casilla de verificación relacionadas deben tener el mismo atributo de name . Se considera una buena práctica definir explícitamente la relación entre una input casilla de verificación y su label correspondiente estableciendo el atributo for en el elemento de label para que coincida con el atributo id del elemento de input asociado. Aquí hay un ejemplo de una casilla de verificación: <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
## Instructions -
-Agregue a su formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento de label . Los tres deben compartir el atributo de name de la personality . -
+
Agregue a su formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento de label . Los tres deben compartir el atributo de name de la personality .
## Tests
@@ -29,11 +19,11 @@ Agregue a su formulario un conjunto de tres casillas de verificación. Cada casi tests: - text: Su página debe tener tres elementos de casilla de verificación. testString: 'assert($("input[type="checkbox"]").length > 2, "Your page should have three checkbox elements.");' - - text: Cada uno de sus tres elementos de casilla de verificación debe estar anidado en su propio elemento etiqueta . + - text: Cada uno de los tres elementos de la casilla de verificación debe estar anidado en su propio elemento de label . testString: 'assert($("label > input[type="checkbox"]:only-child").length > 2, "Each of your three checkbox elements should be nested in its own label element.");' - - text: Asegúrese de que cada uno de sus elementos label tenga una etiqueta de cierre. + - text: Asegúrese de que cada uno de los elementos de su label tenga una etiqueta de cierre. testString: 'assert(code.match(/<\/label>/g) && code.match(/