feat: add Spanish and language parser

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
-<section id='description'>
+<section id="description"> Es probable que hayas visto un atributo <code>alt</code> en una etiqueta <code>img</code> en otros desafíos. <code>Alt</code> 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: <code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code> 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 <code>alt</code> y leer su contenido para entregar información clave. El buen texto <code>alt</code> es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo <code>alt</code> en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio. </section>
-Es probable que haya visto un atributo <code>alt</code> en una etiqueta <code>img</code> en otros desafíos. <code>Alt</code> 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:
-<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>
-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 <code>alt</code> y leer su contenido para entregar información clave.
-buen texto <code>alt</code> es breve pero descriptivo, y está pensado para transmitir brevemente el significado de la imagen. Siempre debes incluir un atributo <code>alt</code> en tu imagen. Por especificación de HTML5, esto ahora se considera obligatorio.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> 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 <code>alt</code> en la etiqueta <code>img</code> , que explica que Camper Cat está haciendo karate. (La imagen <code>src</code> no se vincula a un archivo real, por lo que debería ver el texto <code>alt</code> en la pantalla). </section>
-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 <code>alt</code> en la etiqueta <code>img</code> , que explica que Camper Cat está haciendo karate. (La imagen <code>src</code> no se vincula a un archivo real, por lo que debería ver el texto <code>alt</code> en la pantalla).
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> , y no debe estar vacío'
+  - text: 'Su etiqueta <code>img</code> debe tener un atributo <code>alt</code> , y no debe estar vacía.'
     testString: 'assert($("img").attr("alt"), "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.");'
 
 ```
@@ -39,6 +32,7 @@ tests:
 
 ```html
 <img src="doingKarateWow.jpeg">
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Los formularios a menudo incluyen el campo de <code>input</code> , que se puede usar para crear varios controles de formulario diferentes. El atributo de <code>type</code> en este elemento indica qué tipo de entrada se creará. Puede haber notado el <code>text</code> y <code>submit</code> los tipos de entrada en desafíos anteriores, y HTML5 introdujo una opción para especificar un campo de <code>date</code> . Dependiendo de la compatibilidad del navegador, un selector de fecha aparece en el campo de <code>input</code> 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 <code>text</code> 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: <blockquote> &lt;label for = &quot;input1&quot;&gt; Ingrese una fecha: &lt;/label&gt; <br> &lt;input type = &quot;date&quot; id = &quot;input1&quot; name = &quot;input1&quot;&gt; <br></blockquote></section>
-formularios a menudo incluyen el campo de <code>input</code> , que se puede usar para crear varios controles de formulario diferentes. El atributo de <code>type</code> en este elemento indica qué tipo de entrada se creará. 
-Usted puede haber notado el <code>text</code> y <code>submit</code> los tipos de entrada en los desafíos anteriores, y HTML5 introducido una opción para especificar una <code>date</code> campo. Dependiendo de la compatibilidad del navegador, un selector de fecha aparece en el campo de <code>input</code> 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 <code>text</code> 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: 
-<blockquote>&lt;label for=&quot;input1&quot;&gt;Enter a date:&lt;/label&gt;<br>&lt;input type=&quot;date&quot; id=&quot;input1&quot; name=&quot;input1&quot;&gt;<br></blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>input</code> con un atributo de <code>type</code> de &quot;fecha&quot;, un atributo de <code>id</code> de &quot;pickdate&quot; y un atributo de <code>name</code> de &quot;fecha&quot;. </section>
-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 <code>input</code> con un atributo de <code>type</code> de &quot;fecha&quot;, un atributo de <code>id</code> de &quot;pickdate&quot; y un atributo de <code>name</code> de &quot;fecha&quot;. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -67,6 +59,7 @@ tests:
   </main>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="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. <strong>Nota</strong> <br> 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. </section>
-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. 
-<strong>Nota</strong> <br> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Camper Cat está probando diferentes estilos para un botón importante, pero el color de <code>background-color</code> amarillo ( <code>#FFFF33</code> ) y el color de texto verde ( <code>#33FF33</code> ) son tonalidades <code>#33FF33</code> en la rueda de colores y prácticamente no se distinguen para algunos usuarios que <code>#33FF33</code> <code>color</code> . (Su luminosidad similar también falla la comprobación de la relación de contraste). Cambie el <code>color</code> del texto a azul oscuro ( <code>#003366</code> ) para resolver ambos problemas. </section>
-Camper Cat está probando diferentes estilos para un botón importante, pero el color de <code>background-color</code> amarillo ( <code>#FFFF33</code> ) y el color verde ( <code>#33FF33</code> ) son tonalidades <code>#33FF33</code> en la rueda de colores y prácticamente no se distinguen para algunos usuarios con <code>#33FF33</code> <code>color</code> . (Su luminosidad similar también falla la comprobación de la relación de contraste). Cambie el <code>color</code> del texto a azul oscuro ( <code>#003366</code> ) para resolver ambos problemas. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -52,6 +46,7 @@ tests:
   </header>
   <button>Delete Internet</button>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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. </section>
-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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> 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 <code>background-color</code> con el texto marrón <code>color</code> 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 <code>hsl()</code> CSS (que significa matiz, saturación, luminosidad) cambiando el tercer argumento. Aumente el valor de luminosidad del <code>background-color</code> del 35% al ​​55% y disminuya el valor de luminosidad del <code>color</code> del 20% al 15%. Esto mejora el contraste a 5.9: 1. </section>
-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 <code>background-color</code> con el texto marrón <code>color</code> 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 <code>hsl()</code> CSS (que significa matiz, saturación, luminosidad) cambiando el tercer argumento. Aumente el valor de luminosidad del <code>background-color</code> del 35% al ​​55% y disminuya el valor de luminosidad del <code>color</code> del 20% al 15%. Esto mejora el contraste a 5.9: 1. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -57,6 +50,7 @@ tests:
     <p>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.</p>
   </article>
 </body>
+
 ```
 
 </div>
@@ -68,9 +62,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "body {color: hsl(0, 55%, 15%); background-color: hsl(120, 25%, 55%);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="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 ancla ( <code>a</code> ). Tener una lista de enlaces &quot;haga clic aquí&quot; o &quot;leer más&quot; no es útil. En su lugar, debe utilizar el texto breve pero descriptiva dentro de las <code>a</code> etiquetas para proporcionar más significado para estos usuarios. </section>
-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 ( <code>a</code> ). Tener una lista de enlaces &quot;haga clic aquí&quot; o &quot;leer más&quot; no es útil. En su lugar, debe utilizar el texto breve pero descriptiva dentro de las <code>a</code> etiquetas para proporcionar más significado para estos usuarios. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 ( <code>a</code> ) para que envuelvan el texto &quot;información sobre baterías&quot; en lugar de &quot;Haga clic aquí&quot;. </section>
-El texto del enlace que está utilizando Camper Cat no es muy descriptivo sin el contexto que lo rodea. Mueva las etiquetas de anclaje ( <code>a</code> ) para que envuelvan el texto &quot;información sobre baterías&quot; en lugar de &quot;Haga clic aquí&quot;. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -46,6 +41,7 @@ tests:
     <p>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. <a href="">Click here</a> for information about batteries</p>
   </article>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El elemento de <code>audio</code> 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 <code>audio</code> soporta el atributo de <code>controls</code> . 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: <blockquote> &lt;audio id = &quot;meowClip&quot; controles&gt; <br> &lt;source src = &quot;audio / meow.mp3&quot; type = &quot;audio / mpeg&quot; /&gt; <br> &lt;source src = &quot;audio / meow.ogg&quot; type = &quot;audio / ogg&quot; /&gt; <br> &lt;/audio&gt; <br></blockquote> <strong>Nota</strong> <br> 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. </section>
-El elemento de <code>audio</code> 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 <code>audio</code> admite el atributo de <code>controls</code> . 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: 
-<blockquote>&lt;audio id=&quot;meowClip&quot; controls&gt;<br>&nbsp;&nbsp;&lt;source src=&quot;audio/meow.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;<br>&nbsp;&nbsp;&lt;source src=&quot;audio/meow.ogg&quot; type=&quot;audio/ogg&quot; /&gt;<br>&lt;/audio&gt;<br></blockquote> 
-<strong>Nota</strong> <br> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> 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 <code>audio</code> después de la <code>p</code> . Incluir el atributo de <code>controls</code> . Luego coloque una etiqueta de <code>source</code> dentro de las etiquetas de <code>audio</code> con el atributo <code>src</code> configurado en &quot;https://s3.amazonaws.com/freecodecamp/screen-reader.mp3&quot; y <code>type</code> atributo establecido en &quot;audio / mpeg&quot;. <strong>Nota</strong> <br> 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. </section>
-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 <code>audio</code> después de la <code>p</code> . Incluir el atributo de <code>controls</code> . Luego coloque una etiqueta de <code>source</code> dentro de las etiquetas de <code>audio</code> con el atributo <code>src</code> configurado en &quot;https://s3.amazonaws.com/freecodecamp/screen-reader.mp3&quot; y <code>type</code> atributo establecido en &quot;audio / mpeg&quot;. 
-<strong>Nota</strong> <br> 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. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -62,6 +53,7 @@ tests:
 
   </main>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> HTML5 introdujo el elemento <code>figure</code> , junto con la <code>figcaption</code> 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 <code>figure</code> . 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 <code>figcaption</code> va dentro de las etiquetas de la <code>figure</code> y se puede combinar con otros elementos: <blockquote> &lt;figura&gt; <br> &lt;img src = &quot;roundhouseDestruction.jpeg&quot; alt = &quot;Foto de Camper Cat ejecutando una patada circular&quot;&gt; <br> &lt;br&gt; <br> &lt;figcaption&gt; <br> Master Camper Cat demuestra la forma correcta de una patada circular. <br> &lt;/figcaption&gt; <br> &lt;/figure&gt; <br></blockquote></section>
-HTML5 introdujo el elemento <code>figure</code> , junto con la <code>figcaption</code> 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 <code>figure</code> . 
-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 <code>figcaption</code> va dentro de las etiquetas de <code>figure</code> y se puede combinar con otros elementos: 
-<blockquote>&lt;figure&gt;<br>&nbsp;&nbsp;&lt;img src=&quot;roundhouseDestruction.jpeg&quot; alt=&quot;Photo of Camper Cat executing a roundhouse kick&quot;&gt;<br>&nbsp;&nbsp;&lt;br&gt;<br>&nbsp;&nbsp;&lt;figcaption&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;Master Camper Cat demonstrates proper form of a roundhouse kick.<br>&nbsp;&nbsp;&lt;/figcaption&gt;<br>&lt;/figure&gt;<br></blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>div</code> que usó por una etiqueta de <code>figure</code> , y la etiqueta <code>p</code> que rodea el título a una etiqueta de <code>figcaption</code> . </section>
-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 <code>div</code> que usó por una etiqueta de <code>figure</code> , y la etiqueta <code>p</code> que rodea el título a una etiqueta de <code>figcaption</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -88,6 +81,7 @@ tests:
   </main>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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 <code>label</code> 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 <code>for</code> en una <code>label</code> etiqueta asocia explícitamente esa <code>label</code> 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 <code>label</code> junto con el texto de la etiqueta para poder hacer clic en el texto. Otra forma de lograr esto es utilizando el atributo <code>for</code> como se explica en esta lección. El valor del atributo <code>for</code> debe ser el mismo que el valor del atributo <code>id</code> del control de formulario. Aquí hay un ejemplo: <blockquote> &lt;form&gt; <br> &lt;label for = &quot;name&quot;&gt; Name: &lt;/label&gt; <br> &lt;input type = &quot;text&quot; id = &quot;name&quot; name = &quot;name&quot;&gt; <br> &lt;/form&gt; <br></blockquote></section>
-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 <code>label</code> 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 <code>for</code> en una <code>label</code> etiqueta asocia explícitamente esa <code>label</code> 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 <code>label</code> junto con el texto de la etiqueta para poder hacer clic en el texto. Otra forma de lograr esto es utilizando el atributo <code>for</code> como se explica en esta lección. 
-El valor del atributo <code>for</code> debe ser el mismo que el valor del atributo <code>id</code> del control de formulario. Aquí hay un ejemplo: 
-<blockquote>&lt;form&gt;<br>&nbsp;&nbsp;&lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;<br>&nbsp;&nbsp;&lt;input type=&quottext&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;<br>&lt;/form&gt;<br></blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>for</code> en la <code>label</code> correo electrónico que coincida con el <code>id</code> en su campo de <code>input</code> . </section>
-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 <code>for</code> en la <code>label</code> correo electrónico que coincida con el <code>id</code> en su campo de <code>input</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -72,6 +64,7 @@ tests:
   </article>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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 &quot;suficiente&quot;? 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. </section>
-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 &quot;suficiente&quot;? 
-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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>color</code> del texto del gris actual ( <code>#D3D3D3</code> ) a un gris más oscuro ( <code>#636363</code> ) para mejorar la relación de contraste a 6: 1. </section>
-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 <code>color</code> del texto del gris actual ( <code>#D3D3D3</code> ) a un gris más oscuro ( <code>#636363</code> ) para mejorar la relación de contraste a 6: 1. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -55,6 +50,7 @@ tests:
     <p>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.</p>
   </article>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="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 <code>main</code> , <code>header</code> , <code>footer</code> , <code>nav</code> , <code>article</code> y <code>section</code> , entre otras. Por defecto, un navegador presenta estos elementos de manera similar a la humble <code>div</code> . 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 <code>main</code> 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 <code>main</code> 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 &quot;Ir al contenido principal&quot; en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia. </section>
-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 <code>main</code> , <code>header</code> , <code>footer</code> , <code>nav</code> , <code>article</code> y <code>section</code> , entre otras. 
-De forma predeterminada, un navegador presenta estos elementos de manera similar a la humble <code>div</code> . 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 <code>main</code> 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 <code>main</code> 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 &quot;Ir al contenido principal&quot; en la parte superior de una página, el uso de una etiqueta principal otorga automáticamente esa funcionalidad a los dispositivos de asistencia. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>main</code> etiquetas entre la <code>header</code> y <code>footer</code> (cubierto en otros desafíos). Mantener las etiquetas <code>main</code> vacías por ahora. </section>
-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 <code>main</code> etiquetas entre la <code>header</code> y <code>footer</code> (cubierto en otros desafíos). Mantener las etiquetas <code>main</code> vacías por ahora. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -46,6 +39,7 @@ tests:
 
 
 <footer></footer>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> En el último desafío, aprendiste que incluir un atributo <code>alt</code> 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 <code>alt</code> 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 <code>img</code> aún necesita un atributo <code>alt</code> , pero se puede establecer en una cadena vacía. Aquí hay un ejemplo: <code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code> Las imágenes de fondo también suelen caer bajo la etiqueta &#39;decorativa&#39;. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado. <strong>Nota</strong> <br> Para imágenes con un título, es posible que desee incluir texto <code>alt</code> , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen. </section>
-En el último desafío, aprendiste que incluir un atributo <code>alt</code> 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 <code>alt</code> 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 <code>img</code> aún necesita un atributo <code>alt</code> , pero se puede establecer en una cadena vacía. Aquí hay un ejemplo: 
-<code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code> 
-Las imágenes de fondo también suelen caer bajo la etiqueta &#39;decorativa&#39;. Sin embargo, normalmente se aplican con reglas CSS y, por lo tanto, no forman parte del proceso de los lectores de pantalla de marcado. 
-<strong>Nota</strong> <br> Para imágenes con un título, es posible que desee incluir texto <code>alt</code> , ya que ayuda a los motores de búsqueda a catalogar el contenido de la imagen. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>alt</code> a la etiqueta <code>img</code> y establézcalo en una cadena vacía. (Tenga en cuenta que la imagen <code>src</code> no se enlaza con un archivo real, no se preocupe si no se ven espadas en la pantalla). </section>
-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 <code>alt</code> a la etiqueta <code>img</code> y establézcalo en una cadena vacía. (Tenga en cuenta que la imagen <code>src</code> no se enlaza con un archivo real; no se preocupe si no se ven espadas en la pantalla). 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -52,6 +44,7 @@ tests:
   <h2>Is Chuck Norris a Cat Person?</h2>
   <p>To Come...</p>
 </article>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="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 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: <blockquote> .sr-only { <br> posición: absoluta; <br> izquierda: -10000px; <br> ancho: 1px; <br> altura: 1px; <br> arriba: auto; <br> desbordamiento: oculto; <br> } </blockquote> <strong>Nota</strong> <br> Los siguientes enfoques de CSS NO harán lo mismo: <ul><li> <code>display: none;</code> o <code>visibility: hidden;</code> oculta el contenido para todos, incluidos los usuarios de lectores de pantalla </li><li> Valores cero para tamaños de píxeles, tales como <code>width: 0px; height: 0px;</code> elimina ese elemento del flujo de su documento, lo que significa que los lectores de pantalla lo ignorarán </li></ul></section>
-¿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: 
-<blockquote>.sr-only {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: -10000px;<br>&nbsp;&nbsp;width: 1px;<br>&nbsp;&nbsp;height: 1px;<br>&nbsp;&nbsp;top: auto;<br>&nbsp;&nbsp;overflow: hidden;<br>}</blockquote> 
-<strong>Nota</strong> <br> Los siguientes enfoques de CSS NO harán lo mismo: 
-<ul> 
-<li> <code>display: none;</code> o <code>visibility: hidden;</code> oculta el contenido para todos, incluidos los usuarios de lectores de pantalla </li> 
-<li> Valores cero para tamaños de píxeles, tales como <code>width: 0px; height: 0px;</code> elimina ese elemento del flujo de su documento, lo que significa que los lectores de pantalla lo ignorarán </li> 
-</ul> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>sr-only</code> , pero las reglas de CSS aún no están completas. Asigne a la <code>position</code> un valor absoluto, el valor <code>left</code> a -10000px, y el <code>width</code> y el <code>height</code> ambos valores de 1px. </section>
-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 <code>sr-only</code> , pero las reglas de CSS aún no están completas. Asigne a la <code>position</code> un valor absoluto, el valor <code>left</code> a -10000px, y el <code>width</code> y el <code>height</code> ambos valores de 1px. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -132,6 +120,7 @@ tests:
   </section>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> HTML ofrece la <code>accesskey</code> 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: <code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code> </section>
-HTML ofrece la <code>accesskey</code> 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: 
-<code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> 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 <code>accesskey</code> a ambos enlaces y establezca el primero en &quot;g&quot; (para Garfield) y el segundo en &quot;c&quot; (para Chuck Norris). </section>
-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 <code>accesskey</code> a ambos enlaces y establezca el primero en &quot;g&quot; (para Garfield) y el segundo en &quot;c&quot; (para Chuck Norris). 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -65,6 +58,7 @@ tests:
   </article>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Al igual que el <code>header</code> y la <code>nav</code> , el elemento de <code>footer</code> 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. </section>
-igual que el <code>header</code> y la <code>nav</code> , el elemento de <code>footer</code> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> La página de entrenamiento de Camper Cat está progresando bien. Cambie el <code>div</code> que usó para ajustar su información de copyright en la parte inferior de la página a un elemento de <code>footer</code> . </section>
-La página de entrenamiento de Camper Cat está progresando bien. Cambie el <code>div</code> que usó para ajustar su información de copyright en la parte inferior de la página a un elemento de <code>footer</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -72,6 +68,7 @@ tests:
 
 
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El siguiente elemento HTML5 que agrega un significado semántico y mejora la accesibilidad es la etiqueta del <code>header</code> . 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. <code>header</code> comparte la característica de hito incorporada que vio con <code>main</code> , permitiendo que las tecnologías de asistencia naveguen rápidamente hacia ese contenido. <strong>Nota</strong> <br> <code>header</code> está diseñado para su uso en la etiqueta del <code>body</code> de su documento HTML. Esto es diferente al elemento de <code>head</code> , que contiene el título de la página, metainformación, etc. </section>
-El siguiente elemento HTML5 que agrega un significado semántico y mejora la accesibilidad es la etiqueta del <code>header</code> . 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. 
-<code>header</code> 
-comparte la característica de hito incorporada que vio con <code>main</code> , permitiendo que las tecnologías de asistencia naveguen rápidamente hacia ese contenido. 
-<strong>Nota</strong> <br> <code>header</code> está diseñado para su uso en la etiqueta del <code>body</code> de su documento HTML. Esto es diferente al elemento de <code>head</code> , que contiene el título de la página, metainformación, etc. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> 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 <code>div</code> superior que actualmente contiene el <code>h1</code> a una etiqueta de <code>header</code> . </section>
-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 <code>div</code> superior que actualmente contiene el <code>h1</code> a una etiqueta de <code>header</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -68,6 +61,7 @@ tests:
     </section>
   </main>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El elemento de <code>nav</code> 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 <code>nav</code> . Usar un <code>footer</code> (cubierto en el siguiente desafío) es suficiente. </section>
-El elemento de <code>nav</code> 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 <code>nav</code> . Usar un <code>footer</code> (cubierto en el siguiente desafío) es suficiente. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un <code>div</code> . Cambie el <code>div</code> a una etiqueta de <code>nav</code> para mejorar la accesibilidad en su página. </section>
-Camper Cat incluyó enlaces de navegación en la parte superior de su página de entrenamiento, pero los envolvió en un <code>div</code> . Cambie el <code>div</code> a una etiqueta de <code>nav</code> para mejorar la accesibilidad en su página. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -72,6 +67,7 @@ tests:
     </section>
   </main>
 </body>
+
 ```
 
 </div>

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
-<section id='description'>
+undefined
-Continuando con el tema de la fecha, HTML5 también introdujo el elemento de <code>time</code> junto con un atributo de <code>datetime</code> y <code>datetime</code> 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 <code>datetime</code> . 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:
-<code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code>
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> ¡Los resultados de la encuesta de Mortal Kombat de Camper Cat están aquí! Envuelva una etiqueta de <code>time</code> alrededor del texto &quot;Jueves, 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot; y agregue un atributo de <code>datetime</code> y <code>datetime</code> establecido en &quot;2016-09-15&quot;. </section>
-encuentran los resultados de la encuesta de Mortal Kombat de Camper Cat! Envuelva una etiqueta de <code>time</code> alrededor del texto &quot;Jueves, 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot; y agregue un atributo de <code>datetime</code> y <code>datetime</code> establecido en &quot;2016-09-15&quot;.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'Sus etiquetas de <code>time</code> deben rodear el texto &quot;Jueves 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot;.'
+  - text: Sus etiquetas de <code>time</code> deben rodear el texto &quot;Jueves 15 de septiembre &lt;sup&gt; th &lt;/sup&gt;&quot;.
     testString: 'assert($("time").text().match(/Thursday, September 15th/g), "Your <code>time</code> tags should wrap around the text "Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;".");'
   - text: Su etiqueta de <code>time</code> debe tener un atributo de <code>datetime</code> y <code>datetime</code> que no esté vacío.
     testString: 'assert($("time").attr("datetime"), "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.");'
@@ -73,6 +67,7 @@ tests:
   </article>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Los encabezados (elementos <code>h1</code> a <code>h6</code> ) 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. <em>El significado semántico significa</em> 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 <code>h2</code> seguido de varias subsecciones etiquetadas con etiquetas <code>h4</code> 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 <code>h1</code> (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. </section>
-encabezados (elementos <code>h1</code> a <code>h6</code> ) 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. 
-<em>Significado semántico significa</em> 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 <code>h2</code> seguido de varias subsecciones etiquetadas con etiquetas <code>h4</code> 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 <code>h1</code> (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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> 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 <code>h5</code> al nivel de título adecuado para indicar que son subsecciones de las <code>h2</code> . </section>
-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 <code>h5</code> al nivel de título adecuado para indicar que son subsecciones de las <code>h2</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -55,6 +46,7 @@ tests:
   <h5>How to Breathe Properly</h5>
   <h5>How to Simplify your Life</h5>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El atributo HTML <code>tabindex</code> 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 <code>div</code> , <code>span</code> <code>p</code> , colocando un <code>tabindex=&quot;0&quot;</code> en ellos. Aquí hay un ejemplo: <code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code> <strong>Nota</strong> <br> Un valor de <code>tabindex</code> 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 <code>div</code> para una ventana emergente), y está más allá del alcance de estos desafíos. </section>
-El atributo HTML <code>tabindex</code> 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 <code>div</code> , <code>span</code> <code>p</code> , colocando un <code>tabindex=&quot;0&quot;</code> en ellos. Aquí hay un ejemplo: 
-<code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code> 
-<strong>Nota</strong> <br> Un valor de <code>tabindex</code> 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 <code>div</code> para una ventana emergente), y está más allá del alcance de estos desafíos. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>tabindex</code> a la etiqueta <code>p</code> y establezca su valor en &quot;0&quot;. Bonus: el uso de <code>tabindex</code> también habilita la <code>tabindex</code> CSS <code>:focus</code> para trabajar en la etiqueta <code>p</code> . </section>
-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 <code>tabindex</code> a la etiqueta <code>p</code> y establezca su valor en &quot;0&quot;. Bonus: el uso de <code>tabindex</code> también habilita la <code>tabindex</code> CSS <code>:focus</code> para trabajar en la etiqueta <code>p</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -86,6 +79,7 @@ tests:
   </section>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El atributo <code>tabindex</code> 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 = &quot;1&quot; traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de <code>tabindex</code> especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y <code>tabindex=&quot;0&quot;</code> . 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: <code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code> <code>&lt;div tabindex=&quot;2&quot;&gt;I get keyboard focus, and I get it second!&lt;/div&gt;</code> </section>
-El atributo <code>tabindex</code> 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 = &quot;1&quot; traerá el foco del teclado a ese elemento primero. Luego pasa por la secuencia de valores de <code>tabindex</code> especificados (2, 3, etc.), antes de pasar a los elementos predeterminados y <code>tabindex=&quot;0&quot;</code> . 
-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: 
-<code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code> 
-<code>&lt;div tabindex=&quot;2&quot;&gt;I get keyboard focus, and I get it second!&lt;/div&gt;</code> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>input</code> búsqueda y <code>input</code> controles de formulario de <code>input</code> sean los dos primeros elementos en el orden de tabulación. Agregue un <code>tabindex</code> atributos de <code>tabindex</code> a &quot;1&quot; a la <code>input</code> búsqueda, y un atributo de <code>tabindex</code> establecido a &quot;2&quot; a la <code>input</code> envío. </section>
-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 <code>input</code> búsqueda y <code>input</code> controles de formulario de <code>input</code> sean los dos primeros elementos en el orden de tabulación. Agregue un <code>tabindex</code> atributos de <code>tabindex</code> a &quot;1&quot; a la <code>input</code> búsqueda, y un atributo de <code>tabindex</code> establecido a &quot;2&quot; a la <code>input</code> envío. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -76,6 +67,7 @@ tests:
   </blockquote>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> <code>article</code> es otro de los nuevos elementos HTML5 que agrega un significado semántico a su marca. <code>Article</code> 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. <strong>Nota sobre la <code>section</code> y <code>div</code></strong> <br> El elemento de <code>section</code> también es nuevo con HTML5 y tiene un significado semántico ligeramente diferente al <code>article</code> . Un <code>article</code> es para contenido independiente, y una <code>section</code> 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 <code>article</code> , entonces cada capítulo es una <code>section</code> . Cuando no haya una relación entre grupos de contenido, use un <code>div</code> . <blockquote> &lt;div&gt; - agrupa contenido <br> &lt;sección&gt; - grupos relacionados con el contenido <br> &lt;article&gt; - agrupa contenido independiente, independiente <br></blockquote></section>
-<code>article</code> es otro de los nuevos elementos HTML5 que agrega un significado semántico a su marca. <code>Article</code> 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. 
-<strong>Nota sobre la <code>section</code> y <code>div</code></strong> <br> El elemento de <code>section</code> también es nuevo con HTML5 y tiene un significado semántico ligeramente diferente al <code>article</code> . Un <code>article</code> es para contenido independiente, y una <code>section</code> 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 <code>article</code> , entonces cada capítulo es una <code>section</code> . Cuando no haya una relación entre grupos de contenido, use un <code>div</code> . 
-<blockquote>&lt;div&gt; - groups content<br>&lt;section&gt; - groups related content<br>&lt;article&gt; - groups independent, self-contained content<br></blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Camper Cat usó etiquetas de <code>article</code> para envolver las publicaciones en su página de blog, pero se olvidó de usarlas en la parte superior. Cambie la etiqueta <code>div</code> para usar una etiqueta de <code>article</code> lugar. </section>
-Camper Cat usó etiquetas de <code>article</code> para envolver las publicaciones en su página de blog, pero se olvidó de usarlas en la parte superior. Cambie la etiqueta <code>div</code> para usar una etiqueta de <code>article</code> lugar. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -61,6 +53,7 @@ tests:
     <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
   </article>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El siguiente tema de formulario cubre la accesibilidad de los botones de radio. A cada opción se le asigna una <code>label</code> con un atributo <code>for</code> vincula con el <code>id</code> 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 <code>fieldset</code> rodea todo el grupo de botones de radio para lograr esto. A menudo utiliza una etiqueta de <code>legend</code> para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento <code>fieldset</code> . El <code>fieldset</code> y la etiqueta de <code>legend</code> no son necesarios cuando las opciones se explican por sí mismas, como una selección de género. Usando una <code>label</code> con el <code>for</code> atributo para cada botón de radio es suficiente. Aquí hay un ejemplo: <blockquote> &lt;form&gt; <br> &lt;fieldset&gt; <br> &lt;legend&gt; Elija uno de estos tres elementos: &lt;/legend&gt; <br> &lt;input id = &quot;one&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;one&quot;&gt; <br> &lt;label for = &quot;one&quot;&gt; Choice One &lt;/label&gt; &lt;br&gt; <br> &lt;input id = &quot;two&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;two&quot;&gt; <br> &lt;label for = &quot;two&quot;&gt; Choice Two &lt;/label&gt; &lt;br&gt; <br> &lt;input id = &quot;three&quot; type = &quot;radio&quot; name = &quot;items&quot; value = &quot;three&quot;&gt; <br> &lt;label for = &quot;three&quot;&gt; Choice Three &lt;/label&gt; <br> &lt;/fieldset&gt; <br> &lt;/form&gt; <br></blockquote></section>
-El siguiente tema del formulario cubre la accesibilidad de los botones de radio. A cada opción se le asigna una <code>label</code> con un atributo <code>for</code> vincula con el <code>id</code> 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 <code>fieldset</code> rodea todo el grupo de botones de radio para lograr esto. A menudo utiliza una etiqueta de <code>legend</code> para proporcionar una descripción de la agrupación, que los lectores de pantalla leen para cada opción en el elemento <code>fieldset</code> . 
-El <code>fieldset</code> y la etiqueta de <code>legend</code> no son necesarios cuando las opciones son autoexplicativas, como una selección de género. Usando una <code>label</code> con el <code>for</code> atributo para cada botón de radio es suficiente. 
-Aquí hay un ejemplo: 
-<blockquote>&lt;form&gt;<br>&nbsp;&nbsp;&lt;fieldset&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Choose one of these three items:&lt;/legend&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;one&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;one&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;one&quot;&gt;Choice One&lt;/label&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;two&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;two&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;two&quot;&gt;Choice Two&lt;/label&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;three&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;three&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;three&quot;&gt;Choice Three&lt;/label&gt;<br>&nbsp;&nbsp;&lt;/fieldset&gt;<br>&lt;/form&gt;<br></blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="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 <code>for</code> atributos para cada elección. ¡Ve el gato campista! Sin embargo, su código todavía necesita ayuda. Cambie la etiqueta <code>div</code> rodea a los botones de <code>fieldset</code> una etiqueta de conjunto de <code>fieldset</code> y cambie la etiqueta <code>p</code> dentro de una <code>legend</code> . </section>
-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 <code>for</code> atributos para cada elección. ¡Ve el gato campista! Sin embargo, su código todavía necesita ayuda. Cambie la etiqueta <code>div</code> rodea a los botones de <code>fieldset</code> una etiqueta de conjunto de <code>fieldset</code> y cambie la etiqueta <code>p</code> dentro de una <code>legend</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -89,6 +81,7 @@ tests:
   </article>
   <footer>&copy; 2018 Camper Cat</footer>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La propiedad <code>box-shadow</code> aplica una o más sombras a un elemento. La propiedad <code>box-shadow</code> toma valores para <code>offset-x</code> (la distancia para empujar la sombra horizontalmente desde el elemento), <code>offset-y</code> (la distancia para empujar la sombra verticalmente desde el elemento), <code>blur-radius</code> <code>spread-radius</code> y un color. Valor, en ese orden. Los valores de <code>spread-radius</code> <code>blur-radius</code> <code>spread-radius</code> 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: <blockquote> box-shadow: 0 10px 20px rgba (0,0,0,0.19), 0 6px 6px rgba (0,0,0,0.23); </blockquote></section>
-La propiedad <code>box-shadow</code> aplica una o más sombras a un elemento. 
-La propiedad <code>box-shadow</code> toma valores para <code>offset-x</code> (la distancia para empujar la sombra horizontalmente desde el elemento), <code>offset-y</code> (la distancia para empujar la sombra verticalmente desde el elemento), <code>blur-radius</code> , <code>spread-radius</code> y a Valor del color, en ese orden. Los valores de <code>spread-radius</code> <code>blur-radius</code> <code>spread-radius</code> 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: 
-<blockquote>box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> El elemento ahora tiene un id de <code>thumbnail</code> . Con este selector, use los valores de CSS de ejemplo anteriores para colocar una <code>box-shadow</code> en la tarjeta. </section>
-El elemento ahora tiene un ID de <code>thumbnail</code> . Con este selector, use los valores de CSS de ejemplo anteriores para colocar una <code>box-shadow</code> en la tarjeta. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -83,6 +76,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>
@@ -94,9 +88,7 @@ tests:
 ## Solution
 <section id='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
 ```
-
 </section>

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
-<section id='description'>
+<section id="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 <code>background-color</code> al elemento que contiene el texto que desea enfatizar. Este desafío utiliza <code>rgba()</code> lugar de códigos <code>hex</code> o <code>rgb()</code> normal. <blockquote> rgba significa: <br> r = rojo <br> g = verde <br> b = azul <br> a = alfa / nivel de opacidad </blockquote> 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. <code>rgba()</code> es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo. <code>background-color: rgba(45, 45, 45, 0.1)</code> para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1. </section>
-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 <code>background-color</code> al elemento que contiene el texto que desea enfatizar. Este desafío utiliza <code>rgba()</code> lugar de códigos <code>hex</code> o <code>rgb()</code> normal.
-<blockquote>rgba stands for:<br>&nbsp;&nbsp;r = red<br>&nbsp;&nbsp;g = green<br>&nbsp;&nbsp;b = blue<br>&nbsp;&nbsp;a = alpha/level of opacity</blockquote>
-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. <code>rgba()</code> es excelente para usar en este caso, ya que le permite ajustar la opacidad. Esto significa que no tienes que bloquear completamente el fondo.
-<code>background-color: rgba(45, 45, 45, 0.1)</code> para este desafío. Produce un color gris oscuro que es casi transparente dado el bajo valor de opacidad de 0.1.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Para hacer que el texto destaque más, ajuste el <code>background-color</code> de <code>background-color</code> del elemento <code>h4</code> al valor <code>rgba()</code> dado. También para el <code>h4</code> , elimine la propiedad de <code>height</code> y agregue <code>padding</code> de 10px. </section>
-Para hacer que el texto destaque más, ajuste el <code>background-color</code> de <code>background-color</code> del elemento <code>h4</code> al valor <code>rgba()</code> dado.
-También para el <code>h4</code> , elimine la propiedad de <code>height</code> y agregue <code>padding</code> de 10px.
-</section>
 
 ## Tests
 <section id='tests'>
@@ -83,6 +75,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> 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. </section>
-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.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Esta página utilizará un tono de verde azulado ( <code>#09A7A1</code> ) como color dominante, y su complemento naranja ( <code>#FF790E</code> ) para resaltar visualmente los botones de <code>#FF790E</code> . Cambie el <code>background-color</code> de <code>background-color</code> del <code>header</code> y del <code>footer</code> de <code>footer</code> de negro al color verde azulado. Luego cambia el <code>color</code> texto <code>h2</code> a teal también. Finalmente, cambie el <code>background-color</code> de <code>background-color</code> del <code>button</code> al color naranja. </section>
-Esta página utilizará un tono de verde azulado ( <code>#09A7A1</code> ) como color dominante, y su complemento naranja ( <code>#FF790E</code> ) para resaltar visualmente los botones de <code>#FF790E</code> . Cambie el <code>background-color</code> de <code>background-color</code> del <code>header</code> y del <code>footer</code> de <code>footer</code> de negro al color verde azulado. Luego cambia el <code>color</code> texto <code>h2</code> a teal también. Finalmente, cambie el <code>background-color</code> de <code>background-color</code> del <code>button</code> al color naranja.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'El elemento del <code>header</code> debe tener un <code>background-color</code> de <code>background-color</code> de # 09A7A1.'
+  - text: 'El elemento de <code>header</code> debe tener un <code>background-color</code> de <code>background-color</code> de # 09A7A1.'
     testString: 'assert($("header").css("background-color") == "rgb(9, 167, 161)", "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.");'
   - text: 'El elemento de <code>footer</code> debe tener un <code>background-color</code> de <code>background-color</code> de # 09A7A1.'
     testString: 'assert($("footer").css("background-color") == "rgb(9, 167, 161)", "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.");'
   - text: 'El elemento <code>h2</code> debe tener un <code>color</code> de # 09A7A1.'
     testString: 'assert($("h2").css("color") == "rgb(9, 167, 161)", "The <code>h2</code> element should have a <code>color</code> of #09A7A1.");'
-  - text: 'El elemento del <code>button</code> debe tener un <code>background-color</code> de <code>background-color</code> de # FF790E.'
+  - text: 'El elemento de <code>button</code> debe tener un <code>background-color</code> de <code>background-color</code> de # FF790E.'
     testString: 'assert($("button").css("background-color") == "rgb(255, 121, 14)", "The <code>button</code> element should have a <code>background-color</code> of #FF790E.");'
 
 ```
@@ -78,6 +74,7 @@ tests:
 </main>
 <br>
 <footer>&copy; 2018 FCC Kitchen</footer>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Puede especificar la altura de un elemento utilizando la propiedad de <code>height</code> en CSS, similar a la propiedad de <code>width</code> . Aquí hay un ejemplo que cambia la altura de una imagen a 20px: <blockquote> img { <br> altura: 20px; <br> } </blockquote></section>
-Puede especificar la altura de un elemento utilizando la propiedad de <code>height</code> en CSS, similar a la propiedad de <code>width</code> . Aquí hay un ejemplo que cambia la altura de una imagen a 20px: 
-<blockquote>img {<br>&nbsp;&nbsp;height: 20px;<br>}</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Agregue una propiedad de <code>height</code> a la etiqueta <code>h4</code> y configúrela a 25px. </section>
-Agregue una propiedad de <code>height</code> a la etiqueta <code>h4</code> y configúrela a 25px. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -70,6 +65,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> 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 <code>:hover</code> . Aquí está el CSS para cambiar el <code>color</code> de la etiqueta de anclaje a rojo durante su estado de desplazamiento: <blockquote> a: flotar { <br> color rojo; <br> } </blockquote></section>
-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 <code>:hover</code> . Aquí está el CSS para cambiar el <code>color</code> de la etiqueta de anclaje a rojo durante su estado de desplazamiento:
-<blockquote>a:hover {<br>&nbsp;&nbsp;color: red;<br>}</blockquote>
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> El editor de código tiene una regla CSS para el estilo de todo <code>a</code> negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la <code>a</code> etiqueta, el <code>color</code> es de color azul. </section>
-El editor de código tiene una regla CSS para el estilo de todo <code>a</code> negro etiquetas. Añadir una regla de modo que cuando el usuario se desplaza sobre la <code>a</code> etiqueta, el <code>color</code> es de color azul.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'El <code>color</code> etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el <code>:hover</code> estado de <code>:hover</code> '
+  - text: 'El <code>color</code> etiqueta de anclaje debe permanecer en negro, solo agregue reglas CSS para el estado <code>:hover</code> .'
     testString: 'assert($("a").css("color") == "rgb(0, 0, 0)", "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.");'
   - text: La etiqueta de anclaje debe tener un <code>color</code> azul en el hover.
     testString: 'assert(code.match(/a:hover\s*?{\s*?color:\s*?blue;\s*?}/gi), "The anchor tag should have a <code>color</code> of blue on hover.");'
@@ -47,6 +41,7 @@ tests:
 
 </style>
 <a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Los colores tienen varias características que incluyen matiz, saturación y luminosidad. CSS3 introdujo la propiedad <code>hsl()</code> como una forma alternativa de elegir un color al establecer directamente estas características. <b>Hue</b> es lo que la gente generalmente considera como &quot;color&quot;. 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 <code>hsl()</code> , 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 <b>saturación</b> 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. <b>La luminosidad</b> 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 <code>hsl()</code> usar <code>hsl()</code> con colores de luminosidad normal completamente saturados: <table class="table table-striped"><thead><tr><th> Color </th><th> HSL </th></tr></thead><tbody><tr><td> rojo </td><td> hsl (0, 100%, 50%) </td></tr><tr><td> amarillo </td><td> hsl (60, 100%, 50%) </td></tr><tr><td> verde </td><td> hsl (120, 100%, 50%) </td></tr><tr><td> cian </td><td> hsl (180, 100%, 50%) </td></tr><tr><td> azul </td><td> hsl (240, 100%, 50%) </td></tr><tr><td> magenta </td><td> hsl (300, 100%, 50%) </td></tr></tbody></table></section>
-colores tienen varias características que incluyen matiz, saturación y luminosidad. CSS3 introdujo la propiedad <code>hsl()</code> como una forma alternativa de elegir un color al establecer directamente estas características. 
-<b>Hue</b> es lo que la gente generalmente considera como &#39;color&#39;. 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 <code>hsl()</code> , 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. 
-<b>Saturación</b> 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. 
-<b>luminosidad</b> 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 <code>hsl()</code> usar <code>hsl()</code> con colores de luminosidad normal completamente saturados: 
-<table class="table table-striped"><thead><tr><th> Color </th><th> HSL </th></tr></thead><tbody><tr><td> rojo </td><td> hsl (0, 100%, 50%) </td></tr><tr><td> amarillo </td><td> hsl (60, 100%, 50%) </td></tr><tr><td> verde </td><td> hsl (120, 100%, 50%) </td></tr><tr><td> cian </td><td> hsl (180, 100%, 50%) </td></tr><tr><td> azul </td><td> hsl (240, 100%, 50%) </td></tr><tr><td> magenta </td><td> hsl (300, 100%, 50%) </td></tr></tbody></table> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambie el <code>background-color</code> de <code>background-color</code> de cada elemento <code>div</code> función de los nombres de clase ( <code>green</code> , <code>cyan</code> o <code>blue</code> ) usando <code>hsl()</code> . Los tres deben tener saturación completa y luminosidad normal. </section>
-Cambie el <code>background-color</code> de <code>background-color</code> de cada elemento <code>div</code> función de los nombres de clase ( <code>green</code> , <code>cyan</code> o <code>blue</code> ) usando <code>hsl()</code> . Los tres deben tener saturación completa y luminosidad normal. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -76,6 +67,7 @@ tests:
 <div class="green"></div>
 <div class="cyan"></div>
 <div class="blue"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El tamaño de fuente de las etiquetas de encabezado ( <code>h1</code> a <code>h6</code> ) 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 <code>font-size</code> para ajustar el tamaño del texto en un elemento. </section>
-El tamaño de fuente de las etiquetas de encabezado ( <code>h1</code> a <code>h6</code> ) 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 <code>font-size</code> para ajustar el tamaño del texto en un elemento. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Para hacer que el encabezado sea significativamente más grande que el párrafo, cambie el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h4</code> a 27 píxeles. </section>
-Para hacer que el encabezado sea significativamente más grande que el párrafo, cambie el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h4</code> a 27 píxeles. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -75,6 +71,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La opción <code>hsl()</code> 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 &#39;s&#39; y la &#39;l&#39; de <code>hsl()</code> 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. </section>
-La opción <code>hsl()</code> 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 &#39;s&#39; y la &#39;l&#39; de <code>hsl()</code> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> La barra de navegación en este sitio actualmente hereda su <code>background-color</code> de <code>background-color</code> del elemento del <code>header</code> . Comenzando con ese color como base, agregue un <code>background-color</code> al elemento de <code>nav</code> para que use el mismo tono cian, pero tiene 80% de saturación y 25% de luminosidad para cambiar su tono y tono. </section>
-La barra de navegación en este sitio actualmente hereda su <code>background-color</code> de <code>background-color</code> del elemento del <code>header</code> . Comenzando con ese color como base, agregue un <code>background-color</code> al elemento de <code>nav</code> para que use el mismo tono cian, pero tiene 80% de saturación y 25% de luminosidad para cambiar su tono y tono. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -75,6 +71,7 @@ tests:
     </ul>
   </nav>
 </header>
+
 ```
 
 </div>
@@ -86,9 +83,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "nav {background-color: hsl(180, 80%, 25%);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Puede especificar el ancho de un elemento utilizando la propiedad <code>width</code> 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: <blockquote> img { <br> ancho: 220px; <br> } </blockquote></section>
-Puede especificar el ancho de un elemento utilizando la propiedad <code>width</code> 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: 
-<blockquote>img {<br>&nbsp;&nbsp;width: 220px;<br>}</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Agregue una propiedad de <code>width</code> a toda la tarjeta y establézcala en un valor absoluto de 245px. Usa la clase <code>fullCard</code> para seleccionar el elemento. </section>
-Agregue una propiedad de <code>width</code> a toda la tarjeta y establézcala en un valor absoluto de 245px. Usa la clase <code>fullCard</code> para seleccionar el elemento. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -69,6 +64,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>
@@ -80,9 +76,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = ".fullCard {\nwidth: 245px; border: 1px solid #ccc; border-radius: 5px; margin: 10px 5px; padding: 4px;}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="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 <code>animation-iteration-count</code> y la configuración de reglas de <code>@keyframes</code> . Para ilustrar, la animación de la derecha consta de dos &quot;estrellas&quot; que disminuyen de tamaño y opacidad en la marca del 20% en la regla <code>@keyframes</code> , que crea la animación de <code>@keyframes</code> . Puede cambiar la regla <code>@keyframes</code> para uno de los elementos para que las estrellas parpadeen a diferentes velocidades. </section>
-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 <code>animation-iteration-count</code> y la configuración de reglas de <code>@keyframes</code> . 
-Para ilustrar, la animación de la derecha consta de dos &quot;estrellas&quot; que disminuyen de tamaño y opacidad en la marca del 20% en la regla <code>@keyframes</code> , que crea la animación de <code>@keyframes</code> . Puede cambiar la regla <code>@keyframes</code> para uno de los elementos para que las estrellas parpadeen a diferentes velocidades. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Modifique la tasa de animación del elemento con el nombre de clase de <code>star-1</code> cambiando su regla <code>@keyframes</code> al 50%. </section>
-Modifique la tasa de animación del elemento con el nombre de clase de <code>star-1</code> cambiando su regla <code>@keyframes</code> al 50%. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -87,6 +82,7 @@ tests:
 <div id="back"></div>
 <div class="star-1 stars"></div>
 <div class="star-2 stars"></div>
+
 ```
 
 </div>
@@ -98,9 +94,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "@keyframes twinkle-1 {50% {transform: scale(0.5); opacity: 0.5;}}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Los desafíos anteriores cubrían cómo usar algunas de las propiedades de animación y la regla <code>@keyframes</code> . Otra propiedad de la <code>animation-iteration-count</code> es la <code>animation-iteration-count</code> , que le permite controlar cuántas veces le gustaría recorrer la animación. Aquí hay un ejemplo: <code>animation-iteration-count: 3;</code> 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. </section>
-Los desafíos anteriores cubrían cómo usar algunas de las propiedades de animación y la regla <code>@keyframes</code> . Otra propiedad de la <code>animation-iteration-count</code> es la <code>animation-iteration-count</code> , que le permite controlar cuántas veces le gustaría recorrer la animación. Aquí hay un ejemplo: 
-<code>animation-iteration-count: 3;</code> 
-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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Para mantener la bola rebotando a la derecha en un bucle continuo, cambie la propiedad de <code>animation-iteration-count</code> a infinito. </section>
-Para mantener la bola rebotando a la derecha en un bucle continuo, cambie la propiedad de <code>animation-iteration-count</code> a infinito. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -69,6 +63,7 @@ tests:
   }
 </style>
 <div id="ball"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> En el desafío anterior, cambiaste las tasas de animación para dos elementos animados similares al modificar sus reglas de <code>@keyframes</code> . Puede lograr el mismo objetivo manipulando la <code>animation-duration</code> de la <code>animation-duration</code> de varios elementos. En la animación que se ejecuta en el editor de código, hay tres &quot;estrellas&quot; en el cielo que brillan al mismo ritmo en un bucle continuo. Para hacerlos brillar a diferentes velocidades, puede establecer la propiedad de <code>animation-duration</code> la <code>animation-duration</code> en diferentes valores para cada elemento. </section>
-En el desafío anterior, cambiaste las tasas de animación para dos elementos animados similares al modificar sus reglas <code>@keyframes</code> . Puede lograr el mismo objetivo manipulando la <code>animation-duration</code> de la <code>animation-duration</code> de varios elementos. 
-En la animación que se ejecuta en el editor de código, hay tres &quot;estrellas&quot; en el cielo que brillan al mismo ritmo en un bucle continuo. Para hacerlos brillar a diferentes velocidades, puede establecer la propiedad de <code>animation-duration</code> la <code>animation-duration</code> en diferentes valores para cada elemento. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Establezca la <code>animation-duration</code> de la <code>animation-duration</code> de los elementos con las clases <code>star-1</code> , <code>star-2</code> y <code>star-3</code> en 1s, 0.9s y 1.1s, respectivamente. </section>
-Establezca la <code>animation-duration</code> de la <code>animation-duration</code> de los elementos con las clases <code>star-1</code> , <code>star-2</code> y <code>star-3</code> en 1s, 0.9s y 1.1s, respectivamente. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -92,6 +87,7 @@ tests:
 <div class="star-1 stars"></div>
 <div class="star-2 stars"></div>
 <div class="star-3 stars"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Otra técnica de posicionamiento es centrar un elemento de bloque horizontalmente. Una forma de hacerlo es establecer su <code>margin</code> 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 <code>display</code> para bloquear. </section>
-Otra técnica de posicionamiento es centrar un elemento de bloque horizontalmente. Una forma de hacerlo es establecer su <code>margin</code> 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 <code>display</code> para bloquear. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Centre el <code>div</code> en la página agregando una propiedad de <code>margin</code> con un valor de auto. </section>
-Centre el <code>div</code> en la página agregando una propiedad de <code>margin</code> con un valor de auto. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -44,6 +39,7 @@ tests:
   }
 </style>
 <div></div>
+
 ```
 
 </div>
@@ -55,9 +51,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "div {background-color: blue; height: 100px; width: 100px; margin: auto;}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> CSS trata cada elemento HTML como su propia caja, que generalmente se conoce como el <code>CSS Box Model</code> . 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 <code>normal flow</code> de un documento, pero CSS ofrece la propiedad de posición para anularlo. Cuando la posición de un elemento se establece en <code>relative</code> , le permite especificar cómo CSS debe moverlo en <i>relación</i> con su posición actual en el flujo normal de la página. Se empareja con las propiedades de desplazamiento de CSS de <code>left</code> o <code>right</code> , y de <code>top</code> o <code>bottom</code> . Estos dicen cuántos píxeles, porcentajes o ems para mover el elemento <i>lejos</i> de donde normalmente se coloca. El siguiente ejemplo aleja el párrafo 10 píxeles de la parte inferior: <blockquote> pag { <br> posición: relativa; <br> abajo: 10px; <br> } </blockquote> 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. <strong>Nota</strong> <br> 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. </section>
-CSS trata cada elemento HTML como su propia caja, lo que generalmente se conoce como el <code>CSS Box Model</code> . 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 <code>normal flow</code> de un documento, pero CSS ofrece la propiedad de posición para anularlo. 
-Cuando la posición de un elemento se establece en <code>relative</code> , le permite especificar cómo CSS debe moverlo en <i>relación</i> con su posición actual en el flujo normal de la página. Se empareja con las propiedades de desplazamiento de CSS de <code>left</code> o <code>right</code> , y de <code>top</code> o <code>bottom</code> . Estos dicen cuántos píxeles, porcentajes o ems para mover el elemento <i>lejos</i> de donde normalmente se coloca. El siguiente ejemplo aleja el párrafo 10 píxeles de la parte inferior: 
-<blockquote>p {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;bottom: 10px;<br>}</blockquote> 
-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. 
-<strong>Nota</strong> <br> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambie la <code>position</code> del <code>h2</code> a <code>relative</code> , y use un desplazamiento de CSS para alejarlo 15 píxeles de la <code>top</code> de donde se encuentra en el flujo normal. Observe que no hay impacto en las posiciones de los elementos h1 yp circundantes. </section>
-Cambie la <code>position</code> del <code>h2</code> a <code>relative</code> , y use un desplazamiento de CSS para alejarlo 15 píxeles de la <code>top</code> de donde se encuentra en el flujo normal. Observe que no hay impacto en las posiciones de los elementos h1 yp circundantes. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -51,6 +43,7 @@ tests:
   <h2>Move me!</h2>
   <p>I still think the h2 is where it normally sits.</p>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> En las animaciones CSS, la propiedad <code>animation-timing-function</code> 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 <code>animation-duration</code> su <code>animation-duration</code> ), la <code>animation-timing-function</code> la <code>animation-timing-function</code> 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 <code>ease</code> , que comienza lento, se acelera en el medio y luego se ralentiza nuevamente al final. Otras opciones incluyen la <code>ease-out</code> , que es rápida al principio y luego se ralentiza, la <code>ease-in</code> , que es lenta al principio, luego se acelera al final, o <code>linear</code> , que aplica una velocidad de animación constante en todo momento. </section>
-En las animaciones CSS, la propiedad <code>animation-timing-function</code> 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 <code>animation-duration</code> su <code>animation-duration</code> ), la <code>animation-timing-function</code> la <code>animation-timing-function</code> 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 <code>ease</code> , que comienza lento, se acelera en el medio y luego se ralentiza nuevamente al final. Otras opciones incluyen la <code>ease-out</code> , que es rápida al principio y luego se ralentiza, la <code>ease-in</code> , que es lenta al principio, luego se acelera al final, o <code>linear</code> , que aplica una velocidad de animación constante en todo momento. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Para los elementos con el ID de <code>ball1</code> y <code>ball2</code> , añadir una <code>animation-timing-function</code> propiedad para cada uno, y establecer <code>#ball1</code> a <code>linear</code> , y <code>#ball2</code> a <code>ease-out</code> . Observe la diferencia entre cómo se mueven los elementos durante la animación pero terminan juntos, ya que comparten la misma <code>animation-duration</code> de <code>animation-duration</code> de 2 segundos. </section>
-Para los elementos con el ID de <code>ball1</code> y <code>ball2</code> , añada una <code>animation-timing-function</code> propiedad para cada uno, y establecer <code>#ball1</code> a <code>linear</code> , y <code>#ball2</code> a <code>ease-out</code> . Observe la diferencia entre cómo se mueven los elementos durante la animación pero terminan juntos, ya que comparten la misma <code>animation-duration</code> de <code>animation-duration</code> de 2 segundos. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -76,6 +71,7 @@ tests:
 
 <div class="balls" id="ball1"></div>
 <div class="balls" id="ball2"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="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 <code>z-index</code> 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 <code>z-index</code> de un elemento lo mueven más arriba en la pila que aquellos con valores más bajos. </section>
-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 <code>z-index</code> 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 <code>z-index</code> de un elemento lo mueven más arriba en la pila que aquellos con valores más bajos. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Agregue una propiedad de <code>z-index</code> al elemento con el nombre de la clase de <code>first</code> (el rectángulo rojo) y establézcalo en un valor de 2 para que cubra el otro elemento (rectángulo azul). </section>
-Agregue una propiedad de <code>z-index</code> al elemento con el nombre de la clase de <code>first</code> (el rectángulo rojo) y establézcalo en un valor de 2 para que cubra el otro elemento (rectángulo azul). 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -57,6 +53,7 @@ tests:
 
 <div class="first"></div>
 <div class="second"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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 <code>linear-gradient()</code> la propiedad de <code>background</code> . Aquí está la sintaxis general: <code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code> 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: <code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code> </section>
-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 <code>linear-gradient()</code> la propiedad de <code>background</code> . Aquí está la sintaxis general: 
-<code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code> 
-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: 
-<code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Use un <code>linear-gradient()</code> para el <code>background</code> del elemento <code>div</code> y <code>#CCFFFF</code> desde una dirección de 35 grados para cambiar el color de <code>#CCFFFF</code> a <code>#FFCCCC</code> . <strong>Nota</strong> <br> Si bien hay otras formas de especificar un valor de color, como <code>rgb()</code> o <code>hsl()</code> , use valores hexadecimales para este desafío. </section>
-Use un <code>linear-gradient()</code> para el <code>background</code> del elemento <code>div</code> y <code>#CCFFFF</code> desde una dirección de 35 grados para cambiar el color de <code>#CCFFFF</code> a <code>#FFCCCC</code> . 
-<strong>Nota</strong> <br> Si bien hay otras formas de especificar un valor de color, como <code>rgb()</code> o <code>hsl()</code> , use valores hexadecimales para este desafío. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -52,6 +43,7 @@ tests:
 </style>
 
 <div></div>
+
 ```
 
 </div>
@@ -63,9 +55,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "<style> div{border-radius: 20px; width: 70%; height: 400px; margin: 50px auto; background: linear-gradient(35deg, #cff, #fcc);}</style><div></div>"
+// solution required
 ```
-
 </section>

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
-<section id='description'>
+<section id="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 <code>box-shadow</code> que establece la sombra de un elemento, junto con la propiedad <code>border-radius</code> 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 <code>border-radius</code> debe establecerse en un valor del 50%. Puede recordar de un desafío anterior que la propiedad <code>box-shadow</code> toma valores para <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> , <code>spread-radius</code> y un valor de color en ese orden. Los valores de <code>spread-radius</code> <code>blur-radius</code> <code>spread-radius</code> son opcionales. </section>
-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 <code>box-shadow</code> que establece la sombra de un elemento, junto con la propiedad <code>border-radius</code> 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 <code>border-radius</code> debe establecerse en un valor de 50%.
-Puede recordar de un desafío anterior que la propiedad <code>box-shadow</code> toma valores para <code>offset-x</code> , <code>offset-y</code> , <code>blur-radius</code> , <code>spread-radius</code> y un valor de color en ese orden. Los valores de <code>spread-radius</code> <code>blur-radius</code> <code>spread-radius</code> son opcionales.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el <code>background-color</code> a transparente, luego establezca la propiedad de <code>border-radius</code> en 50% para hacer la forma circular. Finalmente, cambie la propiedad <code>box-shadow</code> para establecer <code>offset-x</code> en 25px, <code>offset-y</code> en 10px, <code>blur-radius</code> en 0, <code>spread-radius</code> en 0 y color en azul. </section>
-Manipule el elemento cuadrado en el editor para crear la forma de la luna. Primero, cambie el <code>background-color</code> a transparente, luego establezca la propiedad de <code>border-radius</code> en 50% para hacer la forma circular. Finalmente, cambie la propiedad <code>box-shadow</code> para establecer <code>offset-x</code> en 25px, <code>offset-y</code> en 10px, <code>blur-radius</code> en 0, <code>spread-radius</code> en 0 y color en azul.
-</section>
 
 ## Tests
 <section id='tests'>
@@ -28,7 +21,7 @@ tests:
     testString: 'assert(code.match(/background-color:\s*?transparent;/gi), "The value of the <code>background-color</code> property should be set to <code>transparent</code>.");'
   - text: El valor de la propiedad <code>border-radius</code> debe establecer en <code>50%</code> .
     testString: 'assert(code.match(/border-radius:\s*?50%;/gi), "The value of the <code>border-radius</code> property should be set to <code>50%</code>.");'
-  - text: 'El valor de la propiedad <code>box-shadow</code> debe establecerse en 25px para <code>offset-x</code> , 10px para <code>offset-y</code> , 0 para <code>blur-radius</code> de <code>blur-radius</code> , 0 para <code>spread-radius</code> de <code>spread-radius</code> y finalmente azul para el color.'
+  - text: 'El valor de la propiedad <code>box-shadow</code> debe establecer en 25px para <code>offset-x</code> , 10px para <code>offset-y</code> , 0 para <code>blur-radius</code> , 0 para <code>spread-radius</code> 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 <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.");'
 
 ```
@@ -60,6 +53,7 @@ tests:
 
 </style>
 <div class="center"></div>
+
 ```
 
 </div>
@@ -71,9 +65,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = ".center {background-color: transparent; border-radius: 50%; box-shadow: 25px 10px 0px 0 blue;}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Puede usar la etiqueta <code>hr</code> 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. </section>
-Puede usar la etiqueta <code>hr</code> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Agregue una etiqueta de <code>hr</code> debajo de la <code>h4</code> que contiene el título de la tarjeta. <strong>Nota</strong> <br> En HTML, <code>hr</code> es una etiqueta de cierre automático, y por lo tanto no necesita una etiqueta de cierre separada. </section>
-Agregue una etiqueta de <code>hr</code> debajo de la <code>h4</code> que contiene el título de la tarjeta. 
-<strong>Nota</strong> <br> En HTML, <code>hr</code> es una etiqueta de cierre automático, y por lo tanto no necesita una etiqueta de cierre separada. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -76,6 +71,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="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 <code>::before</code> y <code>::after</code> . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un <code>::before</code> pseudo-elemento se usa para agregar un rectángulo a un elemento con el <code>heart</code> la clase: <blockquote> .heart :: before { <br> contenido: &quot;&quot;; <br> color de fondo: amarillo; <br> radio del borde: 25%; <br> posición: absoluta; <br> altura: 50px; <br> ancho: 70px; <br> arriba: -50px; <br> izquierda: 5px; <br> } </blockquote> Para que <code>::before</code> y <code>::after</code> pseudo-elements funcionen correctamente, deben tener una propiedad de <code>content</code> definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos <code>::before</code> y <code>::after</code> se usan para hacer formas, la propiedad de <code>content</code> sigue siendo necesaria, pero se establece en una cadena vacía. En el ejemplo anterior, el elemento con la clase de <code>heart</code> tiene un pseudoelemento <code>::before</code> del que produce un rectángulo amarillo con <code>height</code> y <code>width</code> 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 <code>left</code> y 50px por encima de la <code>top</code> del elemento. </section>
-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 <code>::before</code> y <code>::after</code> . Estos pseudo-elementos se usan para agregar algo antes o después de un elemento seleccionado. En el siguiente ejemplo, un <code>::before</code> pseudo-elemento se usa para agregar un rectángulo a un elemento con el <code>heart</code> la clase:
-<blockquote>.heart::before {<br>&nbsp;&nbsp;content: "";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>
-Para que los elementos de pseudo-elementos <code>::before</code> y <code>::after</code> funcionen correctamente, deben tener una propiedad de <code>content</code> definida. Esta propiedad se usa generalmente para agregar elementos como una foto o texto al elemento seleccionado. Cuando los pseudo-elementos <code>::before</code> y <code>::after</code> se usan para hacer formas, la propiedad de <code>content</code> sigue siendo necesaria, pero se establece en una cadena vacía.
-En el ejemplo anterior, el elemento con la clase de <code>heart</code> tiene un pseudoelemento <code>::before</code> del que produce un rectángulo amarillo con <code>height</code> y <code>width</code> 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 <code>left</code> y 50px por encima de la <code>top</code> del elemento.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Transforma el elemento en la pantalla en un corazón. En el <code>heart::after</code> selector, cambie el <code>background-color</code> a rosa y el <code>border-radius</code> del <code>border-radius</code> a 50%. A continuación, apunte el elemento con el <code>heart</code> la clase (solo el <code>heart</code> ) y complete la propiedad de <code>transform</code> . Utilice la función <code>rotate()</code> con -45 grados. ( <code>rotate()</code> funciona de la misma manera que <code>skewX()</code> y <code>skewY()</code> hacen). Finalmente, en el <code>heart::before</code> selector, establece su propiedad de <code>content</code> en una cadena vacía. </section>
-Transforma el elemento en la pantalla a un corazón. En el <code>heart::after</code> selector, cambie el <code>background-color</code> a rosa y el <code>border-radius</code> del <code>border-radius</code> a 50%.
-A continuación, apunte el elemento con el <code>heart</code> la clase (solo el <code>heart</code> ) y complete la propiedad de <code>transform</code> . Utilice la función <code>rotate()</code> con -45 grados. ( <code>rotate()</code> funciona de la misma manera que <code>skewX()</code> y <code>skewY()</code> hacen).
-Finalmente, en el <code>heart::before</code> selector, establece su propiedad de <code>content</code> en una cadena vacía.
-</section>
 
 ## Tests
 <section id='tests'>
@@ -80,6 +71,7 @@ tests:
 }
 </style>
 <div class = "heart"></div>
+
 ```
 
 </div>
@@ -91,9 +83,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = ".heart {transform: rotate(-45deg);} .heart::after {background-color: pink; border-radius: 50%;} .heart::before {content: \"\"; border-radius: 50%;}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Cuando los elementos tienen una <code>position</code> específica, como <code>fixed</code> o <code>relative</code> , las propiedades de desplazamiento de CSS <code>right</code> , <code>left</code> , <code>top</code> y <code>bottom</code> 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 <code>top</code> del fotograma clave del <code>50%</code> a 50px, pero configurándolo en 0px para el primer fotograma clave ( <code>0%</code> ) y el último ( <code>100%</code> ). <blockquote> @keyframes rainbow { <br> 0% { <br> color de fondo: azul; <br> arriba: 0px; <br> } <br> 50% { <br> color de fondo: verde; <br> superior: 50px; <br> } <br> 100% { <br> color de fondo: amarillo; <br> arriba: 0px; <br> } <br> } </blockquote></section>
-Cuando los elementos tienen una <code>position</code> específica, como <code>fixed</code> o <code>relative</code> , las propiedades de desplazamiento de CSS <code>right</code> , <code>left</code> , <code>top</code> y <code>bottom</code> 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 <code>top</code> del <code>50%</code> fotograma clave a 50px, pero configurándolo en 0px para el primer ( <code>0%</code> ) y el último ( <code>100%</code> ) fotograma clave . 
-<blockquote>@keyframes rainbow {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;50% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: green;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;}<br>}</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Añade un movimiento horizontal a la animación <code>div</code> . Usando la propiedad de desplazamiento a la <code>left</code> , agregue a la regla <code>@keyframes</code> para que rainbow comience en 0 píxeles al <code>0%</code> , se mueva a 25 píxeles al <code>50%</code> y termine a -25 píxeles al <code>100%</code> . No reemplace la propiedad <code>top</code> en el editor: la animación debe tener un movimiento vertical y horizontal. </section>
-Agrega un movimiento horizontal a la animación <code>div</code> . Usando la propiedad de desplazamiento a la <code>left</code> , agregue a la regla <code>@keyframes</code> para que rainbow comience en 0 píxeles al <code>0%</code> , se mueva a 25 píxeles al <code>50%</code> y termine a -25 píxeles al <code>100%</code> . No reemplace la propiedad <code>top</code> en el editor: la animación debe tener un movimiento vertical y horizontal. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -75,6 +69,7 @@ tests:
 </style>
 
 <div id="rect"></div>
+
 ```
 
 </div>
@@ -86,9 +81,7 @@ tests:
 ## Solution
 <section id='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
 ```
-
 </section>

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
-<section id='description'> 
+<section id="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 <code>background</code> compatible con la función <code>url()</code> 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. </section>
-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 <code>background</code> compatible con la función <code>url()</code> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Usando la url de <code>https://i.imgur.com/MJAkxbh.png</code> , establezca el <code>background</code> de toda la página con el selector de <code>body</code> . </section>
-Usando la url de <code>https://i.imgur.com/MJAkxbh.png</code> , establezca el <code>background</code> de toda la página con el selector de <code>body</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -39,6 +35,7 @@ tests:
 
   }
 </style>
+
 ```
 
 </div>
@@ -50,9 +47,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "body {background: url('https://i.imgur.com/MJAkxbh.png')}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="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. El texto es a menudo una gran parte del contenido web. CSS tiene varias opciones para alinearlo con la propiedad <code>text-align</code> . <code>text-align: justify;</code> 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. <code>text-align: center;</code> Centra el texto <code>text-align: right;</code> alinea a la derecha el texto y alinea el texto <code>text-align: left;</code> (el valor predeterminado) alinea a la izquierda el texto. </section>
-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 <code>text-align</code> . 
-<code>text-align: justify;</code> 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. 
-<code>text-align: center;</code> Centra el texto 
-<code>text-align: right;</code> alinea a la derecha el texto 
-y alinea el texto <code>text-align: left;</code> (el valor predeterminado) alinea a la izquierda el texto. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Alinee el texto de la etiqueta <code>h4</code> , que dice &quot;Google&quot;, al centro. Luego justifique la etiqueta de párrafo que contiene información sobre cómo se fundó Google. </section>
-Alinee el texto de la etiqueta <code>h4</code> , que dice &quot;Google&quot;, al centro. Luego justifique la etiqueta de párrafo que contiene información sobre cómo se fundó Google. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -74,6 +65,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Para este desafío, cambiará la <code>opacity</code> 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 <code>@keyframes</code> . </section>
-Para este desafío, cambiará la <code>opacity</code> 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 <code>@keyframes</code> . 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Apunte el elemento con el id de la <code>ball</code> y agregue la propiedad de <code>opacity</code> establecida en 0.1 al <code>50%</code> , por lo que el elemento se desvanece a medida que se mueve hacia la derecha. </section>
-Dirija el elemento con el id de la <code>ball</code> y agregue la propiedad de <code>opacity</code> establecida en 0.1 al <code>50%</code> , de modo que el elemento se desvanezca a medida que se mueve hacia la derecha. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -63,6 +58,7 @@ tests:
 </style>
 
 <div id="ball"></div>
+
 ```
 
 </div>
@@ -74,9 +70,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "@keyframes fade {50% { left: 60%; opacity: 0.1;}}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> La propiedad de <code>opacity</code> en CSS se usa para ajustar la opacidad, o por el contrario, la transparencia de un elemento. <blockquote> Un valor de 1 es opaco, que no es transparente en absoluto. <br> Un valor de 0.5 es medio transparente. <br> Un valor de 0 es completamente transparente. </blockquote> 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. </section>
-La propiedad de <code>opacity</code> en CSS se usa para ajustar la opacidad o, a la inversa, la transparencia de un elemento. 
-<blockquote>A value of 1 is opaque, which isn't transparent at all.<br>A value of 0.5 is half see-through.<br>A value of 0 is completely transparent.</blockquote> 
-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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Establezca la <code>opacity</code> de las etiquetas de anclaje en 0.7 utilizando la clase de <code>links</code> para seleccionarlas. </section>
-Establezca la <code>opacity</code> de las etiquetas de anclaje en 0.7 utilizando la clase de <code>links</code> para seleccionarlas. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -81,6 +75,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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 &quot;cancelan&quot; 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: <blockquote> rojo (# FF0000) y cian (# 00FFFF) <br> verde (# 00FF00) y magenta (# FF00FF) <br> azul (# 0000FF) y amarillo (# FFFF00) </blockquote> 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 <a href="https://en.wikipedia.org/wiki/Color_model" target="_blank">aquí</a> 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. <strong>Nota</strong> <br> 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. </section>
-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 &quot;cancelan&quot; 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: 
-<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote> 
-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 <a href='https://en.wikipedia.org/wiki/Color_model' target='_blank'>aquí</a> 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. 
-<strong>Nota</strong> <br> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambie la propiedad de <code>background-color</code> de las clases <code>blue</code> y <code>yellow</code> a sus respectivos colores. Observe cómo los colores se ven diferentes uno al lado del otro en comparación con el fondo blanco. </section>
-Cambie la propiedad de <code>background-color</code> de las clases <code>blue</code> y <code>yellow</code> a sus respectivos colores. Observe cómo los colores se ven diferentes uno al lado del otro en comparación con el fondo blanco. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -60,6 +50,7 @@ tests:
 </style>
 <div class="blue"></div>
 <div class="yellow"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="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: <table class="table table-striped"><thead><tr><th> Color </th><th> Código hexadecimal </th></tr></thead><thead></thead><tbody><tr><td> naranja </td><td> # FF7D00 </td></tr><tr><td> cian </td><td> # 00FFFF </td></tr><tr><td> frambuesa </td><td> # FF007D </td></tr></tbody></table></section>
-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: 
-<table class="table table-striped"><thead><tr><th> Color </th><th> Código hexadecimal </th></tr><thead><tbody><tr><td> naranja </td><td> # FF7D00 </td></tr><tr><td> cian </td><td> # 00FFFF </td></tr><tr><td> frambuesa </td><td> # FF007D </td></tr></tbody></table> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambie la propiedad de <code>background-color</code> de las clases de <code>orange</code> , <code>cyan</code> y <code>raspberry</code> 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. </section>
-Cambie la propiedad de <code>background-color</code> de las clases de <code>orange</code> , <code>cyan</code> y <code>raspberry</code> 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. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -69,6 +61,7 @@ tests:
 <div class="orange"></div>
 <div class="cyan"></div>
 <div class="raspberry"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El último desafío presentó la propiedad de la <code>animation-timing-function</code> 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 <code>cubic-bezier</code> . 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 <code>cubic-bezier</code> consta de cuatro puntos principales que se encuentran en esta cuadrícula de 1 por 1: <code>p0</code> , <code>p1</code> , <code>p2</code> y <code>p3</code> . <code>p0</code> y <code>p3</code> 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 &quot;anclaje&quot; <code>p1</code> y <code>p2</code> en la forma: <code>(x1, y1, x2, y2)</code> . Reuniéndolo todo, aquí hay un ejemplo de una curva Bezier en código CSS: <code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> 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 <code>linear</code> . En otras palabras, cambia a una velocidad constante. </section>
-El último desafío presentó la propiedad de la <code>animation-timing-function</code> 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 <code>cubic-bezier</code> . 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 <code>cubic-bezier</code> consta de cuatro puntos principales que se ubican en esta cuadrícula 1 por 1: <code>p0</code> , <code>p1</code> , <code>p2</code> y <code>p3</code> . <code>p0</code> y <code>p3</code> 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 &quot;anclaje&quot; <code>p1</code> y <code>p2</code> en la forma: <code>(x1, y1, x2, y2)</code> . Reuniéndolo todo, aquí hay un ejemplo de una curva Bezier en el código CSS: 
-<code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code> 
-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 <code>linear</code> . En otras palabras, cambia a una velocidad constante. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Para el elemento con el id de <code>ball1</code> , cambie el valor de la propiedad de <code>animation-timing-function</code> de <code>linear</code> a su valor equivalente <code>cubic-bezier</code> función <code>cubic-bezier</code> . Utilice los valores de puntos dados en el ejemplo anterior. </section>
-Para el elemento con el id de <code>ball1</code> , cambie el valor de la propiedad de <code>animation-timing-function</code> de <code>linear</code> a su valor equivalente <code>cubic-bezier</code> función <code>cubic-bezier</code> . Utilice los valores de puntos dados en el ejemplo anterior. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -79,6 +71,7 @@ tests:
 
 <div class="balls" id="ball1"></div>
 <div class="balls" id="ball2"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Para animar un elemento, debe conocer las propiedades de la animación y la regla <code>@keyframes</code> . Las propiedades de la animación controlan el comportamiento de la animación y la regla <code>@keyframes</code> 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: <code>animation-name</code> establece el nombre de la animación, que luego es utilizada por <code>@keyframes</code> para indicar a CSS qué reglas van con qué animación. <code>animation-duration</code> establece el período de tiempo para la animación. <code>@keyframes</code> 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 &quot;marcos&quot; 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 <code>@keyframes</code> y las propiedades de animación: <blockquote> #anim { <br> Nombre de la animación: colorido; <br> animación-duración: 3s; <br> } <br> @keyframes colorful { <br> 0% { <br> color de fondo: azul; <br> } <br> 100% { <br> color de fondo: amarillo; <br> } <br> } </blockquote> Para el elemento con el <code>anim</code> identificación, el fragmento de código anterior establece la <code>animation-name</code> de <code>colorful</code> y establece la <code>animation-duration</code> de 3 segundos. Luego, la regla <code>@keyframes</code> enlaza con las propiedades de animación con el nombre <code>colorful</code> . 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%. </section>
-Para animar un elemento, debe conocer las propiedades de la animación y la regla <code>@keyframes</code> . Las propiedades de la animación controlan el comportamiento de la animación y la regla <code>@keyframes</code> 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: 
-<code>animation-name</code> establece el nombre de la animación, que luego es utilizada por <code>@keyframes</code> para indicar a CSS qué reglas van con qué animaciones. 
-<code>animation-duration</code> establece el período de tiempo para la animación. 
-<code>@keyframes</code> 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 &quot;marcos&quot; 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 <code>@keyframes</code> y las propiedades de la animación: 
-<blockquote>#anim {<br>&nbsp;&nbsp;animation-name: colorful;<br>&nbsp;&nbsp;animation-duration: 3s;<br>}<br>@keyframes colorful {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;}<br>}</blockquote> 
-Para el elemento con el <code>anim</code> ID, el fragmento de código anterior establece la <code>animation-name</code> de <code>colorful</code> y establece la <code>animation-duration</code> de 3 segundos. Luego, la regla <code>@keyframes</code> enlaza con las propiedades de animación con el nombre <code>colorful</code> . 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%. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cree una animación para el elemento con el id <code>rect</code> , estableciendo el <code>animation-name</code> la <code>animation-name</code> en arco iris y la <code>animation-duration</code> la <code>animation-duration</code> en 4 segundos. A continuación, declare una regla de <code>@keyframes</code> y establezca el <code>background-color</code> al principio de la animación ( <code>0%</code> ) en azul, la mitad de la animación ( <code>50%</code> ) en verde y el final de la animación ( <code>100%</code> ) en amarillo. </section>
-Cree una animación para el elemento con el id <code>rect</code> , estableciendo el <code>animation-name</code> la <code>animation-name</code> en arco iris y la <code>animation-duration</code> la <code>animation-duration</code> en 4 segundos. A continuación, declare una regla de <code>@keyframes</code> y establezca el <code>background-color</code> al principio de la animación ( <code>0%</code> ) en azul, la mitad de la animación ( <code>50%</code> ) en verde y el final de la animación ( <code>100%</code> ) en amarillo. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -68,6 +59,7 @@ tests:
 
 </style>
 <div id="rect"></div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> La siguiente opción para la propiedad de <code>position</code> CSS es <code>absolute</code> , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición <code>relative</code> , 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 <em>posicionado</em> más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando <code>position: relative;</code> ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada. </section>
-La siguiente opción para la propiedad de <code>position</code> CSS es <code>absolute</code> , que bloquea el elemento en su lugar en relación con su contenedor principal. A diferencia de la posición <code>relative</code> , 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 <em>posicionado</em> más cercano. Si olvida agregar una regla de posición al elemento principal, (esto generalmente se hace usando <code>position: relative;</code> ), el navegador seguirá buscando la cadena y, por último, usará la etiqueta del cuerpo de forma predeterminada.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Bloquee el elemento <code>#searchbar</code> en la parte superior derecha de su <code>section</code> principal declarando su <code>position</code> como <code>absolute</code> . Dale las compensaciones <code>top</code> y <code>right</code> de 50 píxeles cada una. </section>
-Bloquee el elemento <code>#searchbar</code> en la parte superior derecha de su <code>section</code> principal declarando su <code>position</code> como <code>absolute</code> . Dale las compensaciones <code>top</code> y <code>right</code> de 50 píxeles cada una.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'El elemento <code>#searchbar</code> debería tener una <code>position</code> establecida en <code>absolute</code> .'
+  - text: 'El elemento <code>#searchbar</code> debe tener una <code>position</code> establecida en <code>absolute</code> .'
     testString: 'assert($("#searchbar").css("position") == "absolute", "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.");'
-  - text: 'Su código debe usar el desplazamiento de CSS <code>top</code> de 50 píxeles en el elemento <code>#searchbar</code> '
+  - text: 'Su código debe usar la compensación de CSS <code>top</code> de 50 píxeles en el elemento <code>#searchbar</code> .'
     testString: 'assert($("#searchbar").css("top") == "50px", "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
-  - text: 'Su código debe usar el desplazamiento de CSS <code>right</code> de 50 píxeles en el elemento <code>#searchbar</code> '
+  - text: 'Su código debe usar el desplazamiento de CSS <code>right</code> de 50 píxeles en el elemento <code>#searchbar</code> .'
     testString: 'assert($("#searchbar").css("right") == "50px", "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.");'
 
 ```
@@ -59,6 +54,7 @@ tests:
     </form>
   </section>
 </body>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> El siguiente esquema de diseño que ofrece CSS es la posición <code>fixed</code> , 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 &quot;dan cuenta&quot; de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares. Una diferencia clave entre las posiciones <code>fixed</code> y <code>absolute</code> es que un elemento con una posición fija no se moverá cuando el usuario se desplace. </section>
-El siguiente esquema de diseño que ofrece CSS es la posición <code>fixed</code> , 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 &quot;dan cuenta&quot; de dónde se coloca, lo que puede requerir algunos ajustes de diseño en otros lugares.
-Una diferencia clave entre las posiciones <code>fixed</code> y <code>absolute</code> es que un elemento con una posición fija no se moverá cuando el usuario se desplace.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> La barra de navegación en el código está etiquetada con una identificación de la <code>navbar</code> de <code>navbar</code> . Cambie su <code>position</code> a <code>fixed</code> , y desplace 0 píxeles desde la <code>top</code> y 0 píxeles desde la <code>left</code> . Observe el (falta de) impacto en la posición <code>h1</code> , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado. </section>
-La barra de navegación en el código está etiquetada con un ID de <code>navbar</code> de <code>navbar</code> . Cambie su <code>position</code> a <code>fixed</code> , y desplace 0 píxeles desde la <code>top</code> y 0 píxeles desde la <code>left</code> . Observe el (falta de) impacto en la posición <code>h1</code> , no se ha empujado hacia abajo para acomodar la barra de navegación y debería ajustarse por separado.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'El elemento <code>#navbar</code> debería tener una <code>position</code> establecida como <code>fixed</code> .'
+  - text: 'El elemento <code>#navbar</code> debe tener una <code>position</code> establecida como <code>fixed</code> .'
     testString: 'assert($("#navbar").css("position") == "fixed", "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.");'
-  - text: 'Su código debe usar el desplazamiento de CSS <code>top</code> de 0 píxeles en el elemento <code>#navbar</code> '
+  - text: 'Su código debe usar la compensación de CSS <code>top</code> de 0 píxeles en el elemento <code>#navbar</code> .'
     testString: 'assert($("#navbar").css("top") == "0px", "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
-  - text: 'Tu código debe usar el desplazamiento de CSS <code>left</code> de 0 píxeles en el elemento <code>#navbar</code> '
+  - text: 'Su código debe usar el desplazamiento de CSS <code>left</code> de 0 píxeles en el elemento <code>#navbar</code> .'
     testString: 'assert($("#navbar").css("left") == "0px", "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.");'
 
 ```
@@ -71,6 +66,7 @@ tests:
   </header>
   <p>I shift up when the #navbar is fixed to the browser window.</p>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Aquí hay otro ejemplo de animación continua con la propiedad de <code>animation-iteration-count</code> 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 <code>heart</code> (que incluyen <code>:before</code> y <code>:after</code> piezas) se animan para cambiar el tamaño con la propiedad de <code>transform</code> , y la <code>div</code> fondo se anima para cambiar su color con la propiedad de <code>background</code> . </section>
-Aquí hay otro ejemplo de animación continua con la propiedad de <code>animation-iteration-count</code> 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 <code>heart</code> (que incluyen <code>:before</code> y <code>:after</code> piezas) se animan para cambiar el tamaño con la propiedad de <code>transform</code> , y la <code>div</code> fondo se anima para cambiar su color con la propiedad de <code>background</code> . 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Mantenga el latido del corazón agregando la propiedad de <code>animation-iteration-count</code> tanto para la clase de <code>back</code> como para la clase del <code>heart</code> y establezca el valor en infinito. El <code>heart:before</code> y <code>heart:after</code> selectores <code>heart:after</code> no necesitan propiedades de animación. </section>
-Mantenga el corazón latiendo agregando la propiedad de <code>animation-iteration-count</code> para la clase de <code>back</code> y la clase de <code>heart</code> y estableciendo el valor en infinito. El <code>heart:before</code> y <code>heart:after</code> selectores <code>heart:after</code> no necesitan propiedades de animación. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -106,6 +101,7 @@ tests:
 </style>
 <div class="back"></div>
 <div class="heart"></div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="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 <code>linear</code> y de <code>ease-out</code> desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto. La <code>animation-timing-function</code> automáticamente en cada fotograma clave cuando la cuenta <code>animation-iteration-count</code> 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 <code>50%</code> ), 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: <code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code> 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. </section>
-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 <code>linear</code> y de <code>ease-out</code> desahogo, sin embargo, ninguno de ellos describe con precisión el movimiento de los malabares. Necesitas personalizar una curva Bezier para esto.
-La <code>animation-timing-function</code> automáticamente en cada fotograma clave cuando el <code>animation-iteration-count</code> 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 <code>50%</code> ), 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:
-<code>cubic-bezier(0.3, 0.4, 0.5, 1.6);</code>
-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.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Cambie el valor de la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con el id de <code>green</code> a una función de <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649. </section>
-Cambie el valor de la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con el id de <code>green</code> a una función <code>cubic-bezier</code> con x1, y1, x2, y2 valores establecidos respectivamente en 0.311, 0.441, 0.444, 1.649.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'El valor de la propiedad <code>animation-timing-function</code> para el elemento con el id <code>green</code> debe ser una función de <code>cubic-bezier</code> con los valores de x1, y1, x2, y2 según lo especificado.'
+  - text: 'El valor de la propiedad de <code>animation-timing-function</code> para el elemento con el id <code>green</code> debe ser una función de <code>cubic-bezier</code> 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 <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.'
 
 ```
@@ -74,6 +66,7 @@ tests:
 <div class="balls" id="red"></div>
 <div class="balls" id="blue"></div>
 <div class="balls" id="green"></div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido <code>500ms</code> , 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 <code>animation-fill-mode</code> en <code>forwards</code> . La <code>animation-fill-mode</code> especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así: <code>animation-fill-mode: forwards;</code> </section>
-Eso es genial, pero no funciona bien todavía. Observe cómo se restablece la animación después de que hayan transcurrido <code>500ms</code> , 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 <code>animation-fill-mode</code> en <code>forwards</code> . La <code>animation-fill-mode</code> especifica el estilo aplicado a un elemento cuando la animación ha finalizado. Puedes configurarlo así:
-<code>animation-fill-mode: forwards;</code>
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Establezca la propiedad de <code>animation-fill-mode</code> del <code>button:hover</code> hacia <code>forwards</code> para que el botón permanezca resaltado cuando un usuario se desplace sobre él. </section>
-Establezca la propiedad de <code>animation-fill-mode</code> del <code>button:hover</code> hacia <code>forwards</code> para que el botón permanezca resaltado cuando un usuario se desplace sobre él.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: ' <code>button:hover</code> debería tener una propiedad de <code>animation-fill-mode</code> con un valor de <code>forwards</code> .'
+  - text: '<code>button:hover</code> debe tener una propiedad de <code>animation-fill-mode</code> con un valor de <code>forwards</code> .'
     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), "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.");'
 
 ```
@@ -57,6 +51,7 @@ tests:
   }
 </style>
 <button>Register</button>
+
 ```
 
 </div>
@@ -68,9 +63,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "button:hover {animation-name: background-color; animation-duration: 500ms; animation-fill-mode: forwards;}"
+// solution required
 ```
-
 </section>

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
-<html><section id='description'>
+<section id="description"> Las compensaciones de CSS de la <code>top</code> o <code>bottom</code> , y de la <code>left</code> o la <code>right</code> 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 <code>h2</code> hacia abajo. Del mismo modo, utilizando un desplazamiento a la izquierda mueve un elemento a la derecha. <h2> Instrucciones </h2><section id="instructions"> Use las compensaciones de CSS para mover el <code>h2</code> 15 píxeles a la derecha y 10 píxeles hacia arriba. </section><h2> Pruebas </h2><section id="tests"><pre> <code class="language-yml">tests: - text: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;bottom&quot;) == &quot;10px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 10px upwards. In other words, move it 10px away from the &lt;code&gt;bottom&lt;/code&gt; of where it normally sits.&quot;);&#39; - text: &#39;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&#39; testString: &#39;assert($(&quot;h2&quot;).css(&quot;left&quot;) == &quot;15px&quot;, &quot;Your code should use a CSS offset to relatively position the &lt;code&gt;h2&lt;/code&gt; 15px towards the right. In other words, move it 15px away from the &lt;code&gt;left&lt;/code&gt; of where it normally sits.&quot;);&#39;</code> </pre></section><h2> Semilla de desafío </h2><section id="challengeSeed"><div id="html-seed"><pre> <code class="language-html">&lt;head&gt; &lt;style&gt; h2 { position: relative; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;On Being Well-Positioned&lt;/h1&gt; &lt;h2&gt;Move me!&lt;/h2&gt; &lt;p&gt;I still think the h2 is where it normally sits.&lt;/p&gt; &lt;/body&gt;</code> </pre></div></section><h2> Solución </h2><section id="solution"><pre> <code class="language-js">// solution required</code> </pre></section></section>
-Las compensaciones de CSS de la <code>top</code> o <code>bottom</code> , y de la <code>left</code> o la <code>right</code> 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 <code>h2</code> hacia abajo. Del mismo modo, utilizando un desplazamiento a la izquierda mueve un elemento a la derecha. <code>0</code>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Use las compensaciones de CSS para mover el <code>h2</code> 15 píxeles a la derecha y 10 píxeles hacia arriba. </section>
-Use las compensaciones de CSS para mover el <code>h2</code> 15 píxeles a la derecha y 10 píxeles hacia arriba.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el <code>h2</code> 10px hacia arriba. En otras palabras, aléjelo 10px de la <code>bottom</code> de donde normalmente se sienta. '
+  - text: 'Su código debe usar un desplazamiento de CSS para colocar relativamente el <code>h2</code> 10px hacia arriba. En otras palabras, aléjelo 10px de la <code>bottom</code> de donde normalmente se sienta.'
     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: 'Su código debe usar un desplazamiento de CSS para posicionar relativamente el <code>h2</code> 15px hacia la derecha. En otras palabras, aléjelo a 15px de la <code>left</code> de donde normalmente se encuentra.
+  - text: 'Su código debe usar un desplazamiento de CSS para colocar relativamente el <code>h2</code> 15px hacia la derecha. En otras palabras, aléjelo 15px de la <code>left</code> de donde normalmente se sienta.'
     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.");'
 
 ```
@@ -49,6 +46,7 @@ tests:
   <h2>Move me!</h2>
   <p>I still think the h2 is where it normally sits.</p>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La siguiente herramienta de posicionamiento no usa realmente la <code>position</code> , pero establece la propiedad de <code>float</code> de un elemento. Los elementos flotantes se eliminan del flujo normal de un documento y se empujan hacia la <code>left</code> o hacia la <code>right</code> de su elemento principal que contiene. Se usa comúnmente con la propiedad de <code>width</code> para especificar cuánto espacio horizontal requiere el elemento flotante. </section>
-La siguiente herramienta de posicionamiento no usa realmente la <code>position</code> , pero establece la propiedad de <code>float</code> de un elemento. Los elementos flotantes se eliminan del flujo normal de un documento y se empujan hacia la <code>left</code> o hacia la <code>right</code> de su elemento principal que contiene. Se usa comúnmente con la propiedad de <code>width</code> para especificar cuánto espacio horizontal requiere el elemento flotante. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> El marcado dado funcionaría bien como un diseño de dos columnas, con los elementos de <code>section</code> y <code>aside</code> uno al lado del otro. Dé al elemento <code>#left</code> un <code>float</code> de la <code>left</code> y el elemento <code>#right</code> un <code>float</code> de la <code>right</code> . </section>
-El marcado dado funcionaría bien como un diseño de dos columnas, con la <code>section</code> y los elementos a <code>aside</code> lado uno del otro. Dé al elemento <code>#left</code> un <code>float</code> de la <code>left</code> y el elemento <code>#right</code> un <code>float</code> de la <code>right</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -65,6 +61,7 @@ tests:
     <p>Links</p>
   </aside>
 </body>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La propiedad de <code>font-size</code> 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 <code>h1</code> a <code>h6</code> para equilibrar los tamaños de los títulos. </section>
-La propiedad de <code>font-size</code> 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 <code>h1</code> a <code>h6</code> para equilibrar los tamaños de los títulos. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"><ul><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h1</code> en 68px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h2</code> en 52px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h3</code> en 40px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h4</code> en 32px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h5</code> en 21px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h6</code> en 14px. </li></ul></section>
-<ul> <li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h1</code> en 68px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h2</code> en 52px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h3</code> en 40px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h4</code> en 32px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h5</code> en 21px. </li><li> Establezca el <code>font-size</code> de <code>font-size</code> de la etiqueta <code>h6</code> en 14px. </li></ul> 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -58,6 +54,7 @@ tests:
 <h4>This is h4 text</h4>
 <h5>This is h5 text</h5>
 <h6>This is h6 text</h6>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La propiedad de <code>font-size</code> en CSS no se limita a los encabezados, se puede aplicar a cualquier elemento que contenga texto. </section>
-La propiedad de <code>font-size</code> en CSS no se limita a los encabezados, se puede aplicar a cualquier elemento que contenga texto. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambie el valor de la propiedad de <code>font-size</code> para el párrafo a 16px para hacerlo más visible. </section>
-Cambie el valor de la propiedad de <code>font-size</code> para el párrafo a 16px para hacerlo más visible. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -42,6 +38,7 @@ tests:
 <p>
   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.
 </p>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Establece el <code>font-size</code> de <code>font-size</code> de cada etiqueta de encabezado en el último desafío, aquí ajustarás el <code>font-weight</code> la <code>font-weight</code> . La propiedad <code>font-weight</code> establece la cantidad de caracteres gruesos o delgados en una sección del texto. </section>
-Establece el <code>font-size</code> de <code>font-size</code> de cada etiqueta de encabezado en el último desafío, aquí ajustará el <code>font-weight</code> la <code>font-weight</code> . 
-La propiedad <code>font-weight</code> establece la cantidad de caracteres gruesos o delgados en una sección del texto. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"><ul><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h1</code> en 800. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h2</code> en 600. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h3</code> en 500. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h4</code> en 400. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h5</code> en 300. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h6</code> en 200. </li></ul></section>
-<ul> <li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h1</code> en 800. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h2</code> en 600. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h3</code> en 500. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h4</code> en 400. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h5</code> en 300. </li><li> Establezca el <code>font-weight</code> de la <code>font-weight</code> de la etiqueta <code>h6</code> en 200. </li></ul> 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -77,6 +72,7 @@ tests:
 <h4>This is h4 text</h4>
 <h5>This is h5 text</h5>
 <h6>This is h6 text</h6>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> CSS ofrece la <code>line-height</code> 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. </section>
-CSS ofrece la <code>line-height</code> 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Agregue una propiedad de <code>line-height</code> a la etiqueta <code>p</code> y establézcala en 25px. </section>
-Agregue una propiedad de <code>line-height</code> a la etiqueta <code>p</code> y establézcala en 25px. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -43,6 +39,7 @@ tests:
 <p>
   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.
 </p>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> Un desafío anterior discutió la palabra clave de <code>ease-out</code> 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 <code>ease-out</code> (para el elemento azul) y <code>linear</code> palabra clave <code>linear</code> (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de <code>ease-out</code> de uso utilizando una función de curva Bezier cúbica personalizada. En general, el cambio de los puntos de anclaje <code>p1</code> y <code>p2</code> 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 <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> : <code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code> Recuerde que todas <code>cubic-bezier</code> funciones de <code>cubic-bezier</code> comienzan con <code>p0</code> en (0, 0) y terminan con <code>p3</code> 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 <code>p1</code> y el valor de 0, luego va a <code>p2</code> y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para <code>p1</code> , hasta 0.58 para <code>p2</code> ). 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. </section>
-Un desafío anterior discutió la palabra clave de <code>ease-out</code> 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 <code>ease-out</code> (para el elemento azul) y <code>linear</code> palabra clave <code>linear</code> (para el elemento rojo). Se pueden lograr progresiones de animación similares a la palabra clave de <code>ease-out</code> de uso utilizando una función de curva Bezier cúbica personalizada.
-En general, el cambio de los puntos de anclaje <code>p1</code> y <code>p2</code> 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:
-<code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code>
-Recuerde que todas <code>cubic-bezier</code> funciones de <code>cubic-bezier</code> comienzan con <code>p0</code> en (0, 0) y terminan con <code>p3</code> 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 <code>p1</code> y el valor de 0, luego va a <code>p2</code> y el valor de 1) que se mueve a través del eje X (0 para comenzar, luego 0 para <code>p1</code> , hasta 0.58 para <code>p2</code> ). 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.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Para ver el efecto de esta curva de Bezier en acción, cambie la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con id de <code>red</code> a una función de <code>cubic-bezier</code> 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. </section>
-Para ver el efecto de esta curva de Bezier en acción, cambie la <code>animation-timing-function</code> de <code>animation-timing-function</code> del elemento con id de <code>red</code> a una función de <code>cubic-bezier</code> 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.
-</section>
 
 ## Tests
 <section id='tests'>
@@ -73,6 +66,7 @@ tests:
 </style>
 <div class="balls" id= "red"></div>
 <div class="balls" id= "blue"></div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La función de <code>repeating-linear-gradient()</code> es muy similar a la <code>linear-gradient()</code> con la diferencia principal de que repite el patrón de gradiente especificado. <code>repeating-linear-gradient()</code> 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 <code>yellow</code> en 0 píxeles, que se mezcla con el segundo color <code>blue</code> 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 <code>green</code> tercer color, que a su vez se mezcla con el valor del color <code>red</code> 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. <code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code> 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. </section>
-La función de <code>repeating-linear-gradient()</code> es muy similar a <code>linear-gradient()</code> con la principal diferencia de que repite el patrón de gradiente especificado. <code>repeating-linear-gradient()</code> 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 <code>yellow</code> en 0 píxeles, que se mezcla con el segundo color <code>blue</code> 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 <code>green</code> tercer color, que a su vez se mezcla con el valor del color <code>red</code> 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. 
-<code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code> 
-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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Haga rayas cambiando el <code>repeating-linear-gradient()</code> para usar un ángulo de gradiente de <code>45deg</code> grados, luego establezca las dos primeras paradas de color en <code>yellow</code> , y finalmente las segundas dos paradas en <code>black</code> . </section>
-Haga rayas cambiando el <code>repeating-linear-gradient()</code> para usar un ángulo de gradiente de <code>45deg</code> grados, luego establezca los dos primeros topes de color en <code>yellow</code> , y finalmente el segundo segundo color se detiene en <code>black</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -68,6 +59,7 @@ tests:
 </style>
 
 <div></div>
+
 ```
 
 </div>
@@ -79,9 +71,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "background: repeating-linear-gradient(45deg, yellow 0px, yellow 40px, black 40px, black 80px);"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Puede usar CSS <code>@keyframes</code> 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: <blockquote> &lt;estilo&gt; <br> img: hover { <br> nombre de la animación: ancho; <br> animación-duración: 500ms; <br> } <br><br> ancho de @keyframes { <br> 100% { <br> ancho: 40px; <br> } <br> } <br> &lt;/style&gt; <br><br> &lt;img src = &quot;https://bit.ly/smallgooglelogo&quot; alt = &quot;Logo de Google&quot; /&gt; </blockquote></section>
-Puede usar CSS <code>@keyframes</code> 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: 
-<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img:hover {<br>&nbsp;&nbsp;&nbsp;&nbsp;animation-name: width;<br>&nbsp;&nbsp;&nbsp;&nbsp;animation-duration: 500ms;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;@keyframes width {<br>&nbsp;&nbsp;&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 40px;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&lt;/style&gt;<br><br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Tenga en cuenta que <code>ms</code> representa milisegundos, donde 1000 ms es igual a 1 s. Use CSS <code>@keyframes</code> para cambiar el <code>background-color</code> de <code>background-color</code> del elemento del <code>button</code> para que se convierta en <code>#4791d0</code> cuando un usuario se <code>#4791d0</code> sobre él. La regla <code>@keyframes</code> solo debe tener una entrada para el <code>100%</code> . </section>
-Tenga en cuenta que <code>ms</code> representa milisegundos, donde 1000 ms es igual a 1 s. 
-Use CSS <code>@keyframes</code> para cambiar el <code>background-color</code> de <code>background-color</code> del elemento del <code>button</code> para que se convierta en <code>#4791d0</code> cuando un usuario se <code>#4791d0</code> sobre él. La regla <code>@keyframes</code> solo debe tener una entrada para el <code>100%</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -26,7 +19,7 @@ Use CSS <code>@keyframes</code> para cambiar el <code>background-color</code> de
 tests:
   - text: La regla @keyframes debe usar el <code>animation-name</code> de color de fondo.
     testString: 'assert(code.match(/@keyframes\s+?background-color\s*?{/g), "The @keyframes rule should use the <code>animation-name</code> background-color.");'
-  - text: &quot;Debería haber una regla en <code>@keyframes</code> que cambie el <code>background-color</code> a <code>#4791d0</code> al 100%&quot;.
+  - text: 'Debería haber una regla en <code>@keyframes</code> que cambie el <code>background-color</code> a <code>#4791d0</code> al 100%.'
     testString: 'assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi), "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.");'
 
 ```
@@ -56,6 +49,7 @@ tests:
 </style>
 
 <button>Register</button>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La siguiente función de la propiedad de <code>transform</code> es <code>skewX()</code> , 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. <blockquote> pag { <br> transformar: skewX (-32deg); <br> } </blockquote></section>
-La siguiente función de la propiedad de <code>transform</code> es <code>skewX()</code> , 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. 
-<blockquote>p {<br>&nbsp;&nbsp;transform: skewX(-32deg);<br>}</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Inclina el elemento con la ID de <code>bottom</code> en 24 grados a lo largo del eje X usando la propiedad de <code>transform</code> . </section>
-Inclina el elemento con la ID de <code>bottom</code> en 24 grados a lo largo del eje X usando la propiedad de <code>transform</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -53,6 +47,7 @@ tests:
 
 <div id="top"></div>
 <div id="bottom"></div>
+
 ```
 
 </div>
@@ -64,9 +59,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "#bottom {background-color: blue; transform: skewX(24deg);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Dado que la función <code>skewX()</code> desvía el elemento seleccionado a lo largo del eje X en un grado determinado, no es sorprendente que la propiedad <code>skewY()</code> un elemento a lo largo del eje Y (vertical). </section>
-Dado que la función <code>skewX()</code> el elemento seleccionado a lo largo del eje X en un grado determinado, no es sorprendente que la propiedad <code>skewY()</code> un elemento a lo largo del eje Y (vertical). 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Inclina el elemento con la identificación de <code>top</code> -10 grados <code>top</code> largo del eje Y usando la propiedad de <code>transform</code> . </section>
-Inclina el elemento con el id de <code>top</code> 10 grados <code>top</code> largo del eje Y utilizando la propiedad de <code>transform</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -52,6 +48,7 @@ tests:
 
 <div id="top"></div>
 <div id="bottom"></div>
+
 ```
 
 </div>
@@ -63,9 +60,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "#top {background-color: red; transform: skewY(-10deg);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'>
+<section id="description"> Para cambiar la escala de un elemento, CSS tiene la propiedad de <code>transform</code> , junto con su función <code>scale()</code> . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página: <blockquote> pag { <br> transformar: escala (2); <br> } </blockquote></section>
-Para cambiar la escala de un elemento, CSS tiene la propiedad de <code>transform</code> , junto con su función <code>scale()</code> . El siguiente ejemplo de código duplica el tamaño de todos los elementos de párrafo en la página:
-<blockquote>p {<br>&nbsp;&nbsp;transform:scale(2);<br>}</blockquote>
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Aumente el tamaño del elemento con el id de <code>ball2</code> a 1.5 veces su tamaño original. </section>
-Aumente el tamaño del elemento con el id de <code>ball2</code> a 1.5 veces su tamaño original.
-</section>
 
 ## Tests
 <section id='tests'>
@@ -61,6 +56,7 @@ tests:
 
 <div class="ball" id= "ball1"></div>
 <div class="ball" id= "ball2"></div>
+
 ```
 
 </div>
@@ -72,9 +68,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "#ball2 {left: 65%; transform: scale(1.5);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> La propiedad de <code>transform</code> tiene una variedad de funciones que le permiten escalar, mover, rotar, sesgar, etc., sus elementos. Cuando se usa con pseudoclases como <code>:hover</code> el <code>:hover</code> que especifican un determinado estado de un elemento, la propiedad de <code>transform</code> 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: <blockquote> p: hover { <br> transformar: escala (2.1); <br> } </blockquote></section>
-La propiedad de <code>transform</code> tiene una variedad de funciones que le permiten escalar, mover, rotar, sesgar, etc., sus elementos. Cuando se usa con pseudoclases como <code>:hover</code> el <code>:hover</code> que especifican un determinado estado de un elemento, la propiedad de <code>transform</code> 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: 
-<blockquote>p:hover {<br>&nbsp;&nbsp;transform: scale(2.1);<br>}</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Añadir una regla CSS para el <code>hover</code> estado del <code>div</code> y utilizar el <code>transform</code> la propiedad para escalar la <code>div</code> elemento a 1,1 veces su tamaño original cuando un usuario se desplaza sobre él. </section>
-Añadir una regla CSS para el <code>hover</code> estado del <code>div</code> y utilizar el <code>transform</code> la propiedad para escalar la <code>div</code> elemento a 1,1 veces su tamaño original cuando un usuario se desplaza sobre él. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -53,6 +47,7 @@ tests:
 </style>
 
 <div></div>
+
 ```
 
 </div>
@@ -64,9 +59,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = "div:hover {transform: scale(1.1);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Para enfatizar el texto, puedes usar la etiqueta <code>em</code> . Esto muestra el texto en cursiva, ya que el navegador aplica el CSS del <code>font-style: italic;</code> de <code>font-style: italic;</code> al elemento. </section>
-Para enfatizar texto, puedes usar la etiqueta <code>em</code> . Esto muestra el texto en cursiva, ya que el navegador aplica el CSS del <code>font-style: italic;</code> de <code>font-style: italic;</code> al elemento. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Envuelva una etiqueta <code>em</code> alrededor del contenido de la etiqueta de párrafo para darle énfasis. </section>
-Envuelva una etiqueta <code>em</code> alrededor del contenido de la etiqueta de párrafo para darle énfasis. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -74,6 +70,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta <code>s</code> . Muestra que una sección de texto ya no es válida. Con la etiqueta <code>s</code> , el navegador aplica el CSS de <code>text-decoration: line-through;</code> al elemento. </section>
-Para tachar el texto, que es cuando una línea horizontal corta los caracteres, puede usar la etiqueta <code>s</code> . Muestra que una sección de texto ya no es válida. Con la etiqueta <code>s</code> , el navegador aplica el CSS de <code>text-decoration: line-through;</code> al elemento.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Envuelva la etiqueta <code>s</code> alrededor de &quot;Google&quot; dentro de la etiqueta <code>h4</code> y luego agregue la palabra Alfabeto junto a ella, que no debería tener el formato tachado. </section>
-Envuelva la etiqueta <code>s</code> alrededor de &quot;Google&quot; dentro de la etiqueta <code>h4</code> y luego agregue la palabra Alfabeto a su lado, que no debería tener el formato tachado.
-</section>
 
 ## Tests
 <section id='tests'>
@@ -76,6 +72,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Para poner el texto en negrita, puede utilizar la etiqueta <code>strong</code> . Esto se usa a menudo para llamar la atención sobre el texto y simbolizar que es importante. Con la etiqueta <code>strong</code> , el navegador aplica el CSS de <code>font-weight: bold;</code> al elemento. </section>
-Para poner el texto en negrita, puede usar la etiqueta <code>strong</code> . Esto se usa a menudo para llamar la atención sobre el texto y simbolizar que es importante. Con la etiqueta <code>strong</code> , el navegador aplica el CSS de <code>font-weight: bold;</code> al elemento. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Envuelva una etiqueta <code>strong</code> alrededor de &quot;Stanford University&quot; dentro de la etiqueta <code>p</code> . </section>
-Envuelve una etiqueta <code>strong</code> alrededor de &quot;Stanford University&quot; dentro de la etiqueta <code>p</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -76,6 +72,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> La propiedad de <code>text-transform</code> 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 <code>text-transform</code> cambian el texto de ejemplo &quot;Transformarme&quot;. <table class="table table-striped"><thead><tr><th> Valor </th><th> Resultado </th></tr></thead><tbody><tr><td> <code>lowercase</code> </td> <td> &quot;transformame&quot; </td></tr><tr><td> <code>uppercase</code> </td> <td> &quot;Transfórmame&quot; </td></tr><tr><td> <code>capitalize</code> </td> <td> &quot;Transformame&quot; </td></tr><tr><td> <code>initial</code> </td> <td> Usa el valor por defecto </td></tr><tr><td> <code>inherit</code> </td> <td> Use el valor de <code>text-transform</code> del elemento padre </td></tr><tr><td> <code>none</code> </td> <td> <strong>Predeterminado:</strong> usar el texto original </td></tr></tbody></table></section>
-La propiedad de <code>text-transform</code> 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 <code>text-transform</code> cambian el texto de ejemplo &quot;Transformarme&quot;. 
-<table class="table table-striped"><thead><th> Valor <th> Resultado <tbody><tr><td> <code>lowercase</code> <td> &quot;transformame&quot; <tr><td> <code>uppercase</code> <td> &quot;Transfórmame&quot; <tr><td> <code>capitalize</code> <td> &quot;Transformame&quot; <tr><td> <code>initial</code> <td> Usa el valor por defecto <tr><td> <code>inherit</code> <td> Use el valor de <code>text-transform</code> del elemento padre <tr><td> <code>none</code> <td> <strong>Predeterminado:</strong> usar el texto original </td></table> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Transforme el texto del <code>h4</code> para que esté en mayúsculas utilizando la propiedad de <code>text-transform</code> . </section>
-Transforme el texto del <code>h4</code> para que esté en mayúsculas utilizando la propiedad de <code>text-transform</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -84,6 +78,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Para subrayar el texto, puede utilizar la etiqueta <code>u</code> . Esto se usa a menudo para indicar que una sección del texto es importante, o algo para recordar. Con la etiqueta <code>u</code> , el navegador aplica el CSS de <code>text-decoration: underline;</code> al elemento. </section>
-Para subrayar el texto, puede utilizar la etiqueta <code>u</code> . Esto se usa a menudo para indicar que una sección del texto es importante, o algo para recordar. Con la etiqueta <code>u</code> , el navegador aplica el CSS de <code>text-decoration: underline;</code> al elemento. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Envuelva la etiqueta <code>u</code> solo alrededor del texto &quot;Estudiantes de doctorado&quot;. <strong>Nota</strong> <br> Intente evitar usar la etiqueta <code>u</code> cuando podría confundirse con un enlace. Las etiquetas de anclaje también tienen un formato subrayado predeterminado. </section>
-Envuelva la etiqueta <code>u</code> únicamente alrededor del texto &quot;Estudiantes de doctorado&quot;. 
-<strong>Nota</strong> <br> Intente evitar usar la etiqueta <code>u</code> cuando podría confundirse con un enlace. Las etiquetas de anclaje también tienen un formato subrayado predeterminado. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -75,6 +70,7 @@ tests:
     </div>
   </div>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El <code>margin</code> un elemento controla la cantidad de espacio entre el <code>border</code> un elemento y los elementos circundantes. Si establece el <code>margin</code> un elemento en un valor negativo, el elemento aumentará de tamaño. </section>
-El <code>margin</code> un elemento controla la cantidad de espacio entre el <code>border</code> un elemento y los elementos circundantes. 
-Si establece el <code>margin</code> un elemento en un valor negativo, el elemento aumentará de tamaño. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Intente establecer el <code>margin</code> en un valor negativo como el del cuadro rojo. Cambie el <code>margin</code> del cuadro azul a <code>-15px</code> , para que llene todo el ancho horizontal del cuadro amarillo que lo rodea. </section>
-Intente establecer el <code>margin</code> en un valor negativo como el del cuadro rojo. 
-Cambie el <code>margin</code> del cuadro azul a <code>-15px</code> , para que llene todo el ancho horizontal del cuadro amarillo que lo rodea. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -74,6 +68,7 @@ tests:
   <h5 class="box red-box">padding</h5>
   <h5 class="box blue-box">padding</h5>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Los bordes CSS tienen propiedades como <code>style</code> , <code>color</code> y <code>width</code> Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase: <blockquote> &lt;estilo&gt; <br> .thin-red-border { <br> color del borde: rojo; <br> ancho del borde: 5px; <br> estilo de borde: sólido; <br> } <br> &lt;/style&gt; </blockquote></section>
-Los bordes CSS tienen propiedades como <code>style</code> , <code>color</code> y <code>width</code> 
-Por ejemplo, si quisiéramos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos usar esta clase: 
-<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Crea una clase llamada <code>thick-green-border</code> . 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 <code>class</code> , separando cada nombre de clase con un espacio. Por ejemplo: <code>&lt;img class=&quot;class1 class2&quot;&gt;</code> </section>
-Crea una clase llamada <code>thick-green-border</code> . 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 <code>class</code> , separando cada nombre de clase con un espacio. Por ejemplo: 
-<code>&lt;img class=&quot;class1 class2&quot;&gt;</code> 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -98,6 +90,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> A veces querrá personalizar un elemento para que tenga un <code>margin</code> diferente en cada uno de sus lados. CSS le permite controlar el <code>margin</code> de los cuatro lados individuales de un elemento con las propiedades <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> y <code>margin-left</code> . </section>
-A veces querrá personalizar un elemento para que tenga un <code>margin</code> diferente en cada uno de sus lados. 
-CSS le permite controlar el <code>margin</code> de los cuatro lados individuales de un elemento con las propiedades <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> y <code>margin-left</code> . 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Dé a la caja azul un <code>margin</code> de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. </section>
-Dé a la caja azul un <code>margin</code> de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -79,6 +74,7 @@ tests:
   <h5 class="box red-box">padding</h5>
   <h5 class="box blue-box">padding</h5>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> A veces querrá personalizar un elemento para que tenga diferentes cantidades de <code>padding</code> en cada uno de sus lados. CSS le permite controlar el <code>padding</code> de los cuatro lados individuales de un elemento con las propiedades <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> y <code>padding-left</code> . </section>
-A veces querrá personalizar un elemento para que tenga diferentes cantidades de <code>padding</code> en cada uno de sus lados. 
-CSS le permite controlar el <code>padding</code> de los cuatro lados individuales de un elemento con las propiedades <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> y <code>padding-left</code> . 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Dale a la caja azul un <code>padding</code> de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. </section>
-Dé a la caja azul un <code>padding</code> de <code>40px</code> en su lado superior e izquierdo, pero solo <code>20px</code> en su lado inferior y derecho. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -80,6 +75,7 @@ tests:
   <h5 class="box red-box">padding</h5>
   <h5 class="box blue-box">padding</h5>
 </div>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code> . </section>
-Tu foto de gato tiene actualmente esquinas afiladas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code> .
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Puede especificar un <code>border-radius</code> con píxeles. Dale a tu foto de gato un <code>border-radius</code> de <code>10px</code> de <code>10px</code> . Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar <code>border-radius</code> <code>.thick-green-border</code> clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code> . </section>
-Puede especificar un <code>border-radius</code> con píxeles. Dale a tu foto de gato un <code>border-radius</code> de <code>10px</code> de <code>10px</code> .
-Nota: este desafío permite múltiples soluciones posibles. Por ejemplo, puede agregar <code>border-radius</code> <code>.thick-green-border</code> clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code> .
-</section>
 
 ## Tests
 <section id='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 <code clase = "notranslate"> 10px </code>
+  - text: Tu imagen debe tener un radio de <code>10px</code> de <code>10px</code>
     testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
 
 ```
@@ -95,6 +90,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> El <code>margin</code> un elemento controla la cantidad de espacio entre el <code>border</code> 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 <code>margin</code> más <code>margin</code> que el cuadro azul, lo que hace que parezca más pequeño. Cuando aumente el <code>margin</code> del cuadro azul, aumentará la distancia entre su borde y los elementos circundantes. </section>
-El <code>margin</code> un elemento controla la cantidad de espacio entre el <code>border</code> 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 <code>margin</code> más <code>margin</code> que el cuadro azul, lo que hace que parezca más pequeño. 
-Cuando aumenta el <code>margin</code> del cuadro azul, aumentará la distancia entre su borde y los elementos circundantes. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambie el <code>margin</code> del cuadro azul para que coincida con el del cuadro rojo. </section>
-Cambie el <code>margin</code> del cuadro azul para que coincida con el del cuadro rojo. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -75,6 +69,7 @@ tests:
   <h5 class="box red-box">padding</h5>
   <h5 class="box blue-box">padding</h5>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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: <code>padding</code> , <code>margin</code> y <code>border</code> . El <code>padding</code> un elemento controla la cantidad de espacio entre el contenido del elemento y su <code>border</code> . 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 <code>padding</code> que el cuadro azul. Cuando aumente el <code>padding</code> del cuadro azul, aumentará la distancia ( <code>padding</code> ) entre el texto y el borde que lo rodea. </section>
-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: <code>padding</code> , <code>margin</code> y <code>border</code> . 
-El <code>padding</code> un elemento controla la cantidad de espacio entre el contenido del elemento y su <code>border</code> . 
-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 <code>padding</code> que el cuadro azul. 
-Cuando aumenta el <code>padding</code> del cuadro azul, aumentará la distancia ( <code>padding</code> ) entre el texto y el borde que lo rodea. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambie el <code>padding</code> de su caja azul para que coincida con el de su caja roja. </section>
-Cambie el <code>padding</code> de su caja azul para que coincida con el de su caja roja. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -76,6 +67,7 @@ tests:
   <h5 class="box red-box">padding</h5>
   <h5 class="box blue-box">padding</h5>
 </div>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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. <strong>Nota:</strong> 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: <blockquote> fondo: var (- piel de pingüino, negro); </blockquote> Esto establecerá el fondo en negro si su variable no se estableció. Tenga en cuenta que esto puede ser útil para la depuración. </section>
-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. 
-<strong>Nota:</strong> 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: 
-<blockquote>background: var(--penguin-skin, black);</blockquote> 
-Esto establecerá el fondo en negro si su variable no se estableció. 
-Tenga en cuenta que esto puede ser útil para la depuración. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Parece que hay un problema con las variables proporcionadas a las <code>.penguin-top</code> y <code>.penguin-bottom</code> . En lugar de corregir el error tipográfico, agregue un valor alternativo de <code>black</code> a la propiedad de <code>background</code> de las <code>.penguin-top</code> y <code>.penguin-bottom</code> . </section>
-Parece que hay un problema con las variables proporcionadas a las <code>.penguin-top</code> y <code>.penguin-bottom</code> . En lugar de corregir el error tipográfico, agregue un valor alternativo de <code>black</code> a la propiedad de <code>background</code> de las <code>.penguin-top</code> y <code>.penguin-bottom</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -245,6 +236,7 @@ tests:
     <div class="beak-bottom"></div>
   </div>
 </div>
+
 ```
 
 </div>
@@ -256,9 +248,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = ".penguin-top {background: var(--pengiun-skin, black);} .penguin-bottom {background: var(--pengiun-skin, black);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'>
+<section id="description"> 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 <dfn>cascada</dfn> . Debido a la conexión en cascada, las variables CSS a menudo se definen en el elemento <dfn>: raíz</dfn> . <code>:root</code> es un selector de <dfn>pseudo-clase</dfn> que coincide con el elemento raíz del documento, generalmente el <code></code> elemento. Al crear sus variables en <code>:root</code> , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo. </section>
-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 <dfn>cascada</dfn> .
-Debido a la cascada, las variables CSS a menudo se definen en el elemento <dfn>: raíz</dfn> .
-<code>:root</code> es un selector de <dfn>pseudo-clase</dfn> que coincide con el elemento raíz del documento, generalmente el <html> elemento. Al crear sus variables en <code>:root</code> , estarán disponibles globalmente y se podrá acceder a ellas desde cualquier otro selector más adelante en la hoja de estilo.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Defina una variable llamada <code>--penguin-belly</code> en el selector de <code>:root</code> y dale el valor de <code>pink</code> . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable. </section>
-Defina una variable llamada <code>--penguin-belly</code> en el selector de <code>:root</code> y déle el valor de <code>pink</code> . Luego puede ver cómo el valor caerá en cascada para cambiar el valor a rosa, en cualquier lugar donde se use esa variable.
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'declara la variable <code>--penguin-belly</code> en la <code>:root</code> y <code>--penguin-belly</code> a <code>pink</code> '
+  - text: 'declara la variable <code>--penguin-belly</code> en la <code>:root</code> y <code>--penguin-belly</code> a <code>pink</code> .'
     testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
 
 ```
@@ -238,6 +232,7 @@ tests:
     <div class="beak-bottom"></div>
   </div>
 </div>
+
 ```
 
 </div>
@@ -249,9 +244,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = ":root {--penguin-belly: pink;}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Cuando cree sus variables en <code>:root</code> , 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. </section>
-Cuando cree sus variables en <code>:root</code> , 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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambia el valor de <code>--penguin-belly</code> a <code>white</code> en la clase de <code>penguin</code> . </section>
-Cambie el valor de <code>--penguin-belly</code> a <code>white</code> en la clase de <code>penguin</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -239,6 +234,7 @@ tests:
     <div class="beak-bottom"></div>
   </div>
 </div>
+
 ```
 
 </div>
@@ -250,9 +246,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = ".penguin {--penguin-belly: white;}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Ahora cambiemos el color de algunos de nuestros textos. Podemos hacer esto cambiando el <code>style</code> de su elemento <code>h2</code> . La propiedad que es responsable del color del texto de un elemento es la propiedad de estilo de <code>color</code> . A continuación le indicamos cómo establecería el color del texto de su elemento <code>h2</code> en azul: <code>&lt;h2 style=&quot;color: blue;&quot;&gt;CatPhotoApp&lt;/h2&gt;</code> Tenga en cuenta que es una buena práctica finalizar las declaraciones de <code>style</code> línea con una <code>;</code> . </section>
-Ahora vamos a cambiar el color de algunos de nuestros textos. 
-Podemos hacer esto cambiando el <code>style</code> de su elemento <code>h2</code> . 
-La propiedad que es responsable del color del texto de un elemento es la propiedad de estilo de <code>color</code> . 
-Así es como establecería el color del texto de su elemento <code>h2</code> en azul: 
-<code>&lt;h2 style=&quot;color: blue;&quot;&gt;CatPhotoApp&lt;/h2&gt;</code> 
-Tenga en cuenta que es una buena práctica finalizar las declaraciones de <code>style</code> línea con una <code>;</code> . 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cambia el estilo de tu elemento <code>h2</code> para que su color de texto sea rojo. </section>
-Cambia el estilo de tu elemento <code>h2</code> para que su color de texto sea rojo. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -72,6 +63,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> El tamaño de fuente se controla mediante la propiedad CSS de <code>font-size</code> , como esta: <blockquote> h1 { <br> tamaño de fuente: 30px; <br> } </blockquote></section>
-El tamaño de fuente se controla mediante la propiedad CSS de <code>font-size</code> , como esta:
-<blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote>
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Dentro de la misma etiqueta <code>&lt;style&gt;</code> que contiene su clase de <code>red-text</code> , cree una entrada para los elementos <code>p</code> y establezca el <code>font-size</code> en 16 píxeles ( <code>16px</code> ). </section>
-Dentro de la misma etiqueta <code>&lt;style&gt;</code> que contiene su clase de <code>red-text</code> , cree una entrada para los elementos <code>p</code> y establezca el <code>font-size</code> en 16 píxeles ( <code>16px</code> ).
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: 'Entre las etiquetas de <code>style</code> , <code>16px</code> elementos <code>p</code> <code>font-size</code> de <code>font-size</code> de <code>16px</code> . El navegador y el zoom de texto deben estar al 100% &quot;.
+  - text: 'Entre las etiquetas de <code>style</code> , <code>16px</code> elementos <code>p</code> <code>font-size</code> de <code>font-size</code> de <code>16px</code> . 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 <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
 
 ```
@@ -72,6 +67,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Para crear una Variable CSS, solo necesitas darle un <code>name</code> con <code>two dashes</code> delante y asignarle un <code>value</code> como este: <blockquote> --penguin-piel: gris; </blockquote> Esto creará una variable llamada <code>--penguin-skin</code> y le asignará el valor de <code>gray</code> . Ahora puede usar esa variable en otra parte de su CSS para cambiar el valor de otros elementos a gris. </section>
-Para crear una Variable CSS, solo debes darle un <code>name</code> con <code>two dashes</code> delante y asignarle un <code>value</code> como este: 
-<blockquote>--penguin-skin: gray;</blockquote> 
-Esto creará una variable llamada <code>--penguin-skin</code> y le asignará el valor de <code>gray</code> . 
-Ahora puede usar esa variable en otra parte de su CSS para cambiar el valor de otros elementos a gris. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> En la clase de <code>penguin</code> , crea un nombre de variable <code>--penguin-skin</code> y dale un valor de <code>gray</code> </section>
-En la clase de <code>penguin</code> , crea un nombre de variable <code>--penguin-skin</code> y dale un valor de <code>gray</code> 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -234,6 +227,7 @@ tests:
     <div class="beak-bottom"></div>
   </div>
 </div>
+
 ```
 
 </div>
@@ -245,9 +239,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code = ".penguin {--penguin-skin: gray;}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Puede establecer el color de fondo de un elemento con la propiedad de <code>background-color</code> . Por ejemplo, si quisiera que el color de fondo de un elemento fuera <code>green</code> , lo pondría dentro de su elemento de <code>style</code> : <blockquote> .green-background { <br> color de fondo: verde; <br> } </blockquote></section>
-Puede establecer el color de fondo de un elemento con la propiedad de <code>background-color</code> . 
-Por ejemplo, si quisiera que el color de fondo de un elemento fuera <code>green</code> , lo pondría dentro de su elemento de <code>style</code> : 
-<blockquote>.green-background {<br>&nbsp;&nbsp;background-color: green;<br>}</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Crea una clase llamada <code>silver-background</code> con el <code>background-color</code> de <code>background-color</code> de plata. Asigna esta clase a tu elemento <code>div</code> . </section>
-Crea una clase llamada <code>silver-background</code> con el <code>background-color</code> de <code>background-color</code> de plata. Asigna esta clase a tu elemento <code>div</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -98,6 +92,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="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 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. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> 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 <code>Lobster</code> . 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 <code>style</code> apertura): <code>&lt;link href=&quot;https://fonts.googleapis.com/css?family=Lobster&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</code> Ahora puede usar la fuente <code>Lobster</code> en su CSS usando <code>Lobster</code> como FAMILY_NAME como en el siguiente ejemplo: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code> . 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 <code>&quot;Open Sans&quot;</code> , pero no para usar la fuente <code>Lobster</code> . </section>
-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. 
-<a href='https://fonts.google.com/' target='_blank'>Google Fonts</a> 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 <code>Lobster</code> . 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 <code>style</code> apertura): 
-<code>&lt;link href=&quot;https://fonts.googleapis.com/css?family=Lobster&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;</code> 
-Ahora puedes usar la fuente <code>Lobster</code> en tu CSS usando <code>Lobster</code> como el FAMILY_NAME como en el siguiente ejemplo: <br> <code>font-family: FAMILY_NAME, GENERIC_NAME;</code> . 
-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 <code>&quot;Open Sans&quot;</code> , pero no para usar la fuente <code>Lobster</code> . 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cree una regla CSS de la <code>font-family</code> que use la fuente <code>Lobster</code> y asegúrese de que se aplicará a su elemento <code>h2</code> . </section>
-Cree una regla CSS de la <code>font-family</code> que use la fuente <code>Lobster</code> y asegúrese de que se aplicará a su elemento <code>h2</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -89,6 +78,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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. </section>
-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. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Parece que se está utilizando una variable para establecer el color de fondo de la clase <code>.red-box</code> . Mejoremos la compatibilidad de nuestro navegador agregando otra declaración de <code>background</code> justo antes de la declaración existente y establezcamos su valor en rojo. </section>
-Parece que se está utilizando una variable para establecer el color de fondo de la clase <code>.red-box</code> . Mejoremos la compatibilidad de nuestro navegador agregando otra declaración de <code>background</code> justo antes de la declaración existente y establezcamos su valor en rojo. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -48,6 +42,7 @@ tests:
   }
 </style>
 <div class="red-box"></div>
+
 ```
 
 </div>
@@ -59,9 +54,7 @@ tests:
 ## Solution
 <section id='solution'>
 
-
 ```js
-var code=".red-box {background: red; background: var(--red-color);}"
+// solution required
 ```
-
 </section>

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
-<section id='description'> 
+<section id="description"> Ahora hemos comprobado que cada página HTML tiene un elemento de <code>body</code> y que su elemento de <code>body</code> también se puede diseñar con CSS. Recuerde, puede diseñar su elemento de <code>body</code> como cualquier otro elemento HTML, y todos los demás elementos heredarán los estilos de su elemento de <code>body</code> . </section>
-Ahora hemos comprobado que cada página HTML tiene un elemento de <code>body</code> , y que su elemento de <code>body</code> también se puede diseñar con CSS. 
-Recuerde, puede diseñar su elemento de <code>body</code> como cualquier otro elemento HTML, y todos los demás elementos heredarán los estilos de su elemento de <code>body</code> . 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Primero, cree un elemento <code>h1</code> con el texto <code>Hello World</code> Then, vamos a dar a todos los elementos de su página el color <code>green</code> agregando <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code> . Finalmente, asigne a su elemento <code>body</code> la familia de fuentes de <code>monospace</code> agregando <code>font-family: monospace;</code> a la declaración de estilo de tu elemento <code>body</code> . </section>
-Primero, cree un elemento <code>h1</code> con el texto <code>Hello World</code> 
-Luego, demos a todos los elementos en su página el color <code>green</code> agregando <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code> . 
-Finalmente, asigne a su elemento <code>body</code> la familia de fuentes de <code>monospace</code> agregando <code>font-family: monospace;</code> a la declaración de estilo de tu elemento <code>body</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -55,6 +48,7 @@ tests:
   }
 
 </style>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Además de los píxeles, también puede especificar el <code>border-radius</code> del <code>border-radius</code> usando un porcentaje. </section>
-Además de los píxeles, también puede especificar el <code>border-radius</code> del <code>border-radius</code> usando un porcentaje. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Dale a tu foto de gato un <code>border-radius</code> de <code>border-radius</code> del <code>50%</code> . </section>
-Dale a tu foto de gato un <code>border-radius</code> de <code>border-radius</code> del <code>50%</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
 
 ```yml
 tests:
-  - text: &quot;Su imagen debe tener un radio de borde del <code>50%</code> , por lo que es perfectamente circular&quot;.
+  - text: 'Su imagen debe tener un radio de borde del <code>50%</code> , por lo que es perfectamente circular.'
     testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Your image should have a border radius of <code>50%</code>, making it perfectly circular.");'
   - text: Asegúrese de utilizar un valor porcentual del <code>50%</code> .
     testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of <code>50%</code>.");'
@@ -94,6 +90,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> ¡Hurra! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de <code>style</code> . 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 <code>!important</code> Volvamos a nuestra declaración de clase de <code>pink-text</code> . Recuerde que nuestra clase de <code>pink-text</code> fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea. </section>
-Yay! Acabamos de demostrar que los estilos en línea anularán todas las declaraciones de CSS en su elemento de <code>style</code> .
-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 <code>!important</code>
-Volvamos a nuestra declaración de clase de <code>pink-text</code> . Recuerde que nuestra clase de <code>pink-text</code> fue anulada por las siguientes declaraciones de clase, declaraciones de id y estilos en línea.
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Agreguemos la palabra clave <code>!important</code> para la declaración de color de su elemento de texto rosa para asegurarnos al 100% de que su elemento <code>h1</code> será rosa. Un ejemplo de cómo hacer esto es: <code>color: red !important;</code> </section>
-¡Agreguemos la palabra clave <code>!important</code> para la declaración de color de su elemento de texto rosado para asegurarnos al 100% de que su elemento <code>h1</code> será rosa.
-Un ejemplo de cómo hacer esto es:
-<code>color: red !important;</code>
-</section>
 
 ## Tests
 <section id='tests'>
@@ -32,7 +23,7 @@ tests:
     testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
   - text: Su elemento <code>h1</code> debe tener el ID de <code>orange-text</code> .
     testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
-  - text: 'Su elemento <code>h1</code> debe tener el estilo de <code>color: white</code> '
+  - text: 'Su elemento <code>h1</code> debe tener el estilo de <code>color: white</code> .'
     testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.");'
   - text: Su declaración de clase de <code>pink-text</code> debe tener la palabra clave <code>!important</code> para anular todas las demás declaraciones.
     testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
@@ -66,6 +57,7 @@ tests:
   }
 </style>
 <h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="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 <code>blue-text</code> <code>pink-text</code> <code>blue-text</code> , y hagamos que su elemento <code>h1</code> naranja, asignando una identificación al elemento <code>h1</code> y luego diseñando ese tipo de identificación. </section>
-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 <code>blue-text</code> <code>pink-text</code> <code>blue-text</code> , y hagamos que su elemento <code>h1</code> naranja, asignando una identificación al elemento <code>h1</code> y luego diseñando un estilo. 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Dale a tu elemento <code>h1</code> el atributo <code>id</code> del <code>orange-text</code> . Recuerde, los estilos de identificación tienen este aspecto: <code>&lt;h1 id=&quot;orange-text&quot;&gt;</code> Deje las clases de <code>pink-text</code> <code>blue-text</code> y <code>pink-text</code> en su elemento <code>h1</code> . Cree una declaración CSS para su ID de <code>orange-text</code> en su elemento de <code>style</code> . Aquí hay un ejemplo de cómo se ve esto: <blockquote> # texto marrón { <br> color marrón; <br> } </blockquote> 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. </section>
-Dale a tu elemento <code>h1</code> el atributo <code>id</code> del <code>orange-text</code> . Recuerde, los estilos de identificación se ven así: 
-<code>&lt;h1 id=&quot;orange-text&quot;&gt;</code> 
-Deje las clases de <code>pink-text</code> <code>blue-text</code> <code>pink-text</code> en su elemento <code>h1</code> . 
-Cree una declaración CSS para su ID de <code>orange-text</code> en su elemento de <code>style</code> . Aquí hay un ejemplo de cómo se ve esto: 
-<blockquote>#brown-text {<br>&nbsp;&nbsp;color: brown;<br>}</blockquote> 
-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. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -67,6 +56,7 @@ tests:
   }
 </style>
 <h1 class="pink-text blue-text">Hello World!</h1>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> 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 <code>style</code> CSS. Hay otras formas en que puedes anular CSS. ¿Recuerdas los estilos en línea? </section>
-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 <code>style</code> CSS. 
-Hay otras formas en que puede anular CSS. ¿Recuerdas los estilos en línea? 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Use un <code>inline style</code> para tratar de hacer que nuestro elemento <code>h1</code> blanco. Recuerde, los estilos de línea se ven así: <code>&lt;h1 style=&quot;color: green;&quot;&gt;</code> Deje las clases de <code>pink-text</code> <code>blue-text</code> y <code>pink-text</code> en su elemento <code>h1</code> . </section>
-Use un <code>inline style</code> para tratar de hacer que nuestro elemento <code>h1</code> blanco. Recuerde, los estilos de línea se ven así: 
-<code>&lt;h1 style=&quot;color: green;&quot;&gt;</code> 
-Deje las clases de <code>pink-text</code> <code>blue-text</code> <code>pink-text</code> en su elemento <code>h1</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -62,6 +55,7 @@ tests:
   }
 </style>
 <h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Nuestra clase de &quot;texto rosa&quot; anuló la declaración CSS de nuestro elemento de <code>body</code> . Acabamos de demostrar que nuestras clases anularán el CSS del elemento <code>body</code> . Entonces, la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase de <code>pink-text</code> ? </section>
-Nuestra clase de &quot;texto rosa&quot; anuló la declaración CSS de nuestro elemento de <code>body</code> ! 
-Acabamos de demostrar que nuestras clases anularán el CSS del elemento del <code>body</code> . Entonces, la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase de <code>pink-text</code> ? 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cree una clase CSS adicional llamada <code>blue-text</code> que le dé a un elemento el color azul. Asegúrate de que esté debajo de tu declaración de clase de <code>pink-text</code> . Aplique la clase de <code>blue-text</code> a su elemento <code>h1</code> además de su clase de <code>pink-text</code> , 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: <code>class=&quot;class1 class2&quot;</code> 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 <code>class</code> en la sección <code>&lt;style&gt;</code> . La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que <code>.blue-text</code> se declara segundo, anula los atributos de <code>.pink-text</code> </section>
-Crea una clase CSS adicional llamada <code>blue-text</code> que le da a un elemento el color azul. Asegúrate de que esté debajo de tu declaración de clase de <code>pink-text</code> . 
-Aplique la clase de <code>blue-text</code> a su elemento <code>h1</code> además de su clase de <code>pink-text</code> , 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: 
-<code>class=&quot;class1 class2&quot;</code> 
-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 <code>class</code> en la sección <code>&lt;style&gt;</code> . La segunda declaración siempre tendrá prioridad sobre la primera. Como <code>.blue-text</code> se declara en segundo lugar, anula los atributos de <code>.pink-text</code> 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -57,6 +47,7 @@ tests:
   }
 </style>
 <h1 class="pink-text">Hello World!</h1>
+
 ```
 
 </div>

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
-<section id='description'>
+<section id="description"> A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí. Por ejemplo, su elemento <code>h1</code> 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 <em>anulará</em> el <code>color: green;</code> del elemento del <code>body</code> <code>color: green;</code> Propiedad CSS? </section>
-A veces, sus elementos HTML recibirán múltiples estilos que entren en conflicto entre sí.
-Por ejemplo, su elemento <code>h1</code> 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 <em>anulará</em> el <code>color: green;</code> del elemento del <code>body</code> <code>color: green;</code> Propiedad CSS?
-</section>
 
 ## Instructions
-<section id='instructions'>
+<section id="instructions"> Crea una clase de CSS llamada <code>pink-text</code> que le da a un elemento el color rosa. Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> . </section>
-Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosa.
-Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> .
-</section>
 
 ## Tests
 <section id='tests'>
@@ -26,7 +19,7 @@ Dale a tu elemento <code>h1</code> la clase de <code>pink-text</code> .
 tests:
   - text: Su elemento <code>h1</code> debe tener la clase <code>pink-text</code> .
     testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
-  - text: 'Tu <code>&lt;style&gt;</code> debe tener una clase de CSS de <code>pink-text</code> que cambie el <code>color</code> .'
+  - text: Su <code>&lt;style&gt;</code> debe tener una clase de CSS de <code>pink-text</code> que cambie el <code>color</code> .
     testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
   - text: Tu elemento <code>h1</code> debe ser rosa.
     testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
@@ -49,6 +42,7 @@ tests:
   }
 </style>
 <h1>Hello World!</h1>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Puede establecer qué fuente debe usar un elemento, usando la propiedad de <code>font-family</code> . Por ejemplo, si quisiera establecer la fuente de su elemento <code>h2</code> en <code>sans-serif</code> , usaría el siguiente CSS: <blockquote> h2 { <br> Familia tipográfica: sans-serif; <br> } </blockquote></section>
-Puede establecer qué fuente debe usar un elemento, usando la propiedad <code>font-family</code> . 
-Por ejemplo, si quisiera establecer la fuente de su elemento <code>h2</code> en <code>sans-serif</code> , usaría el siguiente CSS: 
-<blockquote>h2 {<br>&nbsp;&nbsp;font-family: sans-serif;<br>}</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Haz que todos tus elementos <code>p</code> utilicen la fuente <code>monospace</code> . </section>
-Haz que todos tus elementos <code>p</code> usen la fuente <code>monospace</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -77,6 +71,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> Además de las clases, cada elemento HTML también puede tener un atributo <code>id</code> . El uso de atributos de <code>id</code> tiene varios beneficios: puede usar una <code>id</code> para diseñar un solo elemento y más adelante aprenderá que puede usarlos para seleccionar y modificar elementos específicos con JavaScript. <code>id</code> atributos de <code>id</code> 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 <code>id</code> . Aquí hay un ejemplo de cómo le das a tu elemento <code>h2</code> el ID de <code>cat-photo-app</code> : <code>&lt;h2 id=&quot;cat-photo-app&quot;&gt;</code> </section>
-Además de las clases, cada elemento HTML también puede tener un atributo <code>id</code> . 
-Existen varios beneficios de usar atributos de <code>id</code> : puede usar una <code>id</code> 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 
-<code>id</code> 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 <code>id</code> . 
-Aquí hay un ejemplo de cómo le das a tu elemento <code>h2</code> el ID de <code>cat-photo-app</code> : 
-<code>&lt;h2 id=&quot;cat-photo-app&quot;&gt;</code> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Dale a tu elemento de <code>form</code> la identificación <code>cat-photo-form</code> . </section>
-Dale a tu elemento de <code>form</code> la identificación <code>cat-photo-form</code> . 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -101,6 +92,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>

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
-<section id='description'> 
+<section id="description"> CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con las fuentes, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. Por ejemplo, si quisiéramos crear una clase CSS llamada <code>larger-image</code> que diera a los elementos HTML un ancho de 500 píxeles, usaríamos: <blockquote> &lt;estilo&gt; <br> .larger-image { <br> ancho: 500px; <br> } <br> &lt;/style&gt; </blockquote></section>
-CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con las fuentes, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. 
-Por ejemplo, si quisiéramos crear una clase CSS llamada <code>larger-image</code> que diera a los elementos HTML un ancho de 500 píxeles, usaríamos: 
-<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote> 
-</section>
 
 ## Instructions
-<section id='instructions'> 
+<section id="instructions"> Cree una clase llamada <code>smaller-image</code> y utilícela para cambiar el tamaño de la imagen de modo que tenga solo 100 píxeles de ancho. <strong>Nota</strong> <br> 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. </section>
-Cree una clase llamada <code>smaller-image</code> y utilícela para cambiar el tamaño de la imagen de modo que tenga solo 100 píxeles de ancho. 
-<strong>Nota</strong> <br> 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. 
-</section>
 
 ## Tests
 <section id='tests'>
@@ -86,6 +79,7 @@ tests:
     <button type="submit">Submit</button>
   </form>
 </main>
+
 ```
 
 </div>