diff --git a/seed_data/challenges/basic-html5-and-css.json b/seed_data/challenges/basic-html5-and-css.json index a05e23160c..f1b852ba1c 100644 --- a/seed_data/challenges/basic-html5-and-css.json +++ b/seed_data/challenges/basic-html5-and-css.json @@ -28,8 +28,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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.", + "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\"." + ], "namePt": "", "descriptionPt": [] }, @@ -59,8 +67,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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.", + "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." + ], "namePt": "", "descriptionPt": [] }, @@ -89,8 +102,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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>" + ], "namePt": "", "descriptionPt": [] }, @@ -119,8 +136,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: Separa Elementos Visualmente con Saltos de Línea", + "descriptionEs": [ + "Agrega un salto de línea entre los elementos <h2> y <p>.", + "Puedes crear un elemento de salto de línea con <br/>.", + "Fíjate que <br/> no tiene etiqueta de cierre. Es un elemento auto-cerrado. ¿Ves cómo un / precede el signo de cierre (>)?", + "Luego te encontrarás con otras etiquetas de elementos auto-cerrados." + ], "namePt": "", "descriptionPt": [] }, @@ -158,8 +180,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: Quitar 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 -->." + ], "namePt": "", "descriptionPt": [] }, @@ -195,8 +222,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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." + ], "namePt": "", "descriptionPt": [] }, @@ -230,8 +261,14 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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." + ], "namePt": "", "descriptionPt": [] }, @@ -266,8 +303,12 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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." + ], "namePt": "", "descriptionPt": [] }, @@ -296,8 +337,13 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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.", + "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>" + ], "namePt": "", "descriptionPt": [] }, @@ -330,8 +376,16 @@ "descriptionFr": [], "nameRu": "", "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], + "nameEs": "Waypoint: 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", + "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." + ], "namePt": "", "descriptionPt": [] },