diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index 3493d890e11..6cccf023514 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -33,15 +33,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Saluda a los Elementos HTML", + "nameEs": "Saluda a los Elementos HTML", "descriptionEs": [ - "¡Bienvenido/a al primer desafío de programación de Free Code Camp! Haz click en el botón de abajo para tener más instrucciones.", - "Genial. Ahora puedes leer el resto de las instrucciones de este desafío.", + "¡Bienvenido/a al primer desafío de programación de Free Code Camp!", "Puedes editar tu código en tu editor de texto, que hemos incrustado en esta página web.", "¿Ves el código en tu editor de texto que dice <h1>Hello</h1>? Ese es un elemento HTML.", "La mayoría de los elementos HTML tienen una etiqueta de apertura y una etiqueta de cierre. Las etiquetas de apertura se ven como: <h1>. Las etiquetas de cierre se ven como: </h1>. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).", - "Una vez que hayas completado cada desafío, y que hayas pasado todas sus pruebas, el botón \"Ir a mi siguiente desafío\" se activará. Haz click en él - o presiona control y enter al mismo tiempo - para avanzar al siguiente desafío.", - "Para activar el botón \"Ir a mi siguiente desafío\" de este ejercicio, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\"." + "Cada desafio tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Ejecutar pruebas\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafio.", + "Para pasar la prueba en este desafio, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"." ], "namePt": "", "descriptionPt": [], @@ -84,12 +83,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Encabezado con el elemento h2", + "nameEs": "Encabezado con el elemento h2", "descriptionEs": [ - "Agrega una etiqueta h2 que diga \"CatPhotoApp\" para crear un segundo elemento HTML debajo de tu elemento h1 \"Hello World\".", - "El elemento h2 que ingreses creará un elemento h2 en el sitio web.", + "Durante los siguientes desafios, construiremos una aplicación HTML que lucirá como la siguiente:", + "\"Pantallazo", + "El elemento h2 que ingreses creará un elemento h2 en el sitio web.", "Este elemento le dice al navegador cómo mostrar el texto que contiene.", - "Los elementos h2 son ligeramente más pequeños que los elementos h1. También hay elementos h3, h4, h5 y h6" + "Los elementos h2 son ligeramente más pequeños que los elementos h1. También hay elementos h3, h4, h5 y h6", + "Agrega una etiqueta h2 que diga \"CatPhotoApp\" para crear un segundo elemento HTML debajo de tu elemento h1 \"Hello World\"." ], "namePt": "", "descriptionPt": [], @@ -127,11 +128,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Informa con el Elemento Párrafo", + "nameEs": "Informa con el Elemento Párrafo", "descriptionEs": [ - "Crea un elemento párrafo debajo de tu elemento h2, y dale el texto \"Hello Paragraph\". Apenas escribas la etiqueta de apertura <p>, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre </p>", - "Los elementos párrafo son los principales elementos para los párrafos de texto en tamaño normal en sitios web.", - "Tú puedes crear un elemento párrafo como éste: <p>I'm a p tag!</p>" + "Los elementos p son los elementos preferidos en los sitios web para los párrafos de texto en tamaño normal. La P es abreviatura de \"párrafo\".", + "Tú puedes crear un elemento párrafo como éste: <p>¡Soy una etiqueta p!</p>", + "Crea un elemento p debajo de tu elemento h2, y ponle el texto \"Hello Paragraph\"." ], "namePt": "", "descriptionPt": [], @@ -174,12 +175,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Quitar comentarios HTML", + "nameEs": "Quita comentarios HTML", "descriptionEs": [ - "Quitar el comentario a los elementos h1, h2 y p", - "Crear comentarios es una forma en la que puedes dejar mensajes dentro de tu código sin afectar el resultado.", - "Agregar comentarios es también una forma conveniente de desactivar tu código sin tener que borrarlo por completo.", - "Puedes comenzar un comentario con <!-- y terminar de comentar con -->" + "\"Comentar\" es una manera en la que puedes dejar anotaciones en tu código sin afectar el código mismo.", + "Comentar también es una forma conveniente de desactivar código sin tener que borrarlo por completo.", + "Puedes comenzar un comentario con <!-- y terminar de comentar con -->", + "Quita el comentario a los elementos h1, h2 y p" ], "namePt": "", "descriptionPt": [], @@ -222,11 +223,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Comenta en HTML", + "nameEs": "Comenta en HTML", "descriptionEs": [ - "Comenta el elemento h1 y el elemento p, pero deja sin comentar el elemento h2", "Recuerda que para comenzar un comentario, necesitas usar <!-- y para terminar un comentario, necesitas usar -->", - "Aquí necesitarás terminar el comentario antes que comience el elemento h2." + "Aquí necesitarás terminar el comentario antes que comience el elemento h2.", + "Comenta el elemento h1 y el elemento p, pero deja sin comentar el elemento h2" ], "namePt": "", "descriptionPt": [], @@ -264,13 +265,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Llena espacios con texto de relleno", + "nameEs": "Llena espacios con texto de relleno", "descriptionEs": [ - "Cambia el texto en el elemento p para usar las primeras palabras del texto Kitty Ipsum", "Los desarrolladores web tradicionalmente usan Lorem Ipsum como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.", "El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.", - "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!", - "Aquí están las primeras palabras del texto Kitty Ipsum, que puedes copiar y pegar en la posición correcta: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!", + "Remplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "namePt": "", "descriptionPt": [], @@ -311,11 +311,11 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Borra elementos HTML", + "nameEs": "Borra elementos HTML", "descriptionEs": [ - "Borra los elementos h1 y br para simplificar nuestra vista.", - "Nuestro teléfono no tiene mucho espacio para elementos HTML.", - "Removamos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp." + "Nuestro teléfono no tiene mucho espacio vertical.", + "Eliminemos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp.", + "Borra el elemento h1 para simplificar nuestra vista." ], "namePt": "", "descriptionPt": [], @@ -353,12 +353,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Cambia el color del texto", + "nameEs": "Cambia el color del texto", "descriptionEs": [ - "Cambia el estilo del elemento h2 de manera que el color de su texto sea rojo.", - "Podemos hacer esto por medio de cambiar el estilo del elemento h2", + "Ahora cambiemos el color de parte de nuestro texto.", + "Podemos hacer esto cambiando el style del elemento h2", "El estilo responsable del color de texto de un elemento es el estilo \"color\".", - "Así es como podrías volver el color de texto de tu elemento h2 en azul: <h2 style=\"color: blue\">CatPhotoApp</h2>" + "Así es como podrías poner en azul el color de texto de tu elemento h2:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "Cambia el estilo del elemento h2 de manera que el color de su texto sea rojo." ], "namePt": "", "descriptionPt": [], @@ -406,15 +408,18 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Usa selectores CSS para dar estilo a los elementos", + "nameEs": "Usa selectores CSS para dar estilo a los elementos", "descriptionEs": [ - "Borra el atributo style de tu elemento h2 y escribe el CSS para hacer todos los elementos h2 de color azul.", - "Con CSS, hay cientos de atributos CSS que puedes usar para cambiar como un elemento se ve en una página web.", - "Cuando entraste <h2 style=\"color: red\">CatPhotoApp<h2>, le estuviste dando a ese elemento h2 en particular un estilo en línea", + "Con CSS, hay cientos de propiedades CSS que puedes usar para cambiar como un elemento se ve en una página web.", + "Cuando ingresaste <h2 style=\"color: red\">CatPhotoApp<h2>, le estuviste dando al elemento h2 un estilo en línea", "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando Hojas de Estilo en Cascada (Cascading Style Sheets, CSS).", - "Al principio de tu código, crea una etiqueta style como ésta: <style></style>", - "Dentro de ese elemento style, puedes crear un selector css para todos los elementos h2. Por ejemplo, si querías que todos los elementos h2 sean rojos, tu elemento style se vería así: <style>h2 {color: red;}</style>", - "Fíjate que es importante tener llaves de apertura y de cierre ({ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento está entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento." + "Al principio de tu código, crea un elemento style como este: <style></style>", + "Dentro de ese elemento style, puedes crear un selector CSS para todos los elementos h2. Por ejemplo, si quisieras que todos los elementos h2 fueran rojos, tu elemento style se vería así:", + "<style>", + "  h2 {color: red;}", + "</style>", + "Fíjate que es importante tener llaves de apertura y de cierre ({ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento esté entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento.", + "Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrea el CSS necesario para hacer todos los elementos h2 de color azul." ], "namePt": "", "descriptionPt": [], @@ -472,16 +477,21 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Utiliza una clase CSS para darle estilo a un elemento", + "nameEs": "Utiliza una clase CSS para darle estilo a un elemento", "descriptionEs": [ - "Crea una clase CSS llamada \"red-text\" y aplicala a tu elemento h2", - "Las clases son estilos reutilizables que pueden ser añadidos a elementos HTML", - "Esta es la anatomía de una clase CSS:", - "\"a", + "Las clases son estilos reutilizables que pueden añadirse a elementos HTML.", + "Aquí esta un ejemplo de una declaración de una clase CSS:", + "<style>", + "  .blue-text {", + "    color: blue;", + "  }", + "</style>", "Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <style>", - "Puedes aplicar una clase a un elemento HTML de esta manera: <h2 class=\"blue-text\">CatPhotoApp</h2>", - "Nota que en el elemento CSS style, las clases deberían comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deberían comenzar con punto. ", - "En vez de de crear un nuevo elemento style, prueba remover la declaración de estilo de h2 y reemplazarla por la declaración \"red-text\"." + "Puedes aplicar una clase a un elemento HTML de esta manera:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Nota que en tu elemento style CSS, las clases deben comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deben comenzar con punto. ", + "En vez de de crear un nuevo elemento style, intenta eliminar la declaración de estilo de h2 de tus elementos de estilo existentes y reemplazala por la declaración de clase .red-text.", + "Crea una clase CSS llamada red-text y aplicala a tu elemento h2" ], "namePt": "", "descriptionPt": [], @@ -535,11 +545,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Estila multiples elementos con una clase CSS", + "nameEs": "Da estilo a múltiples elementos con una clase CSS", "descriptionEs": [ - "Aplica la clase \"red-text\" a tus elementos h2 y p", - "Recuerda que puedes agregar clases a elementos HTML utilizando class=\"your-class-here\" dentro de la tag de entrada del mismo.", - "Recuerda que los selectores CSS requieren un punto al principio: .blue-text { color: blue; }, pero que las declaraciones de clase NO llevan punto: <h2 class=\"blue-text\">CatPhotoApp<h2>" + "Recuerda que puedes adjuntar clases a elementos HTML utilizando class=\"tu-clase-aqui\" dentro de la etiqueta de apertura del elemento mismo.", + "Recuerda que los selectores de clase CSS requieren un punto al principio, así:", + ".blue-text {", + "  color: blue;", + "}", + "Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:", + "<h2 class=\"blue-text\">CatPhotoApp<h2>", + "Aplica la clase red-text a tus elementos h2 y p" ], "namePt": "", "descriptionPt": [], @@ -586,12 +601,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "Waypoint: Cambia el tamaño de fuente de un elemento.", + "nameEs": "Cambia el tamaño de fuente de un elemento.", "descriptionEs": [ - "Crea un segundo elemento p. Luego, dentro de tu elemento <style>, pon el \"font-size\" de todos los elementos p a 16 pixeles.", - "El tamaño de fuente es controlado por el atributo CSS \"font-size\", como aquí: h1 { font-size: 30px; }", - "Primero, crea un segundo elemento p con el siguiente texto Kitty Ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Ve si puedes encontrar una manera de darle a ambos elementos p un font-size de 16 pixeles (16px). Puedes hacer esto dentro de la misma etiqueta <style> que creamos para la clase \"red-text\"." + "El tamaño de fuente es controlado por la propiedad CSS \"font-size\", como aquí:", + "h1 {", + "  font-size: 30px;", + "}", + "Crea un segundo elemento p con el siguiente texto kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px)." ], "namePt": "", "descriptionPt": [],