diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index c54d12541a..22f99eb110 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -9,7 +9,7 @@ "description": [ "Welcome to Free Code Camp's first coding challenge!", "You can edit code in your text editor, which we've embedded into this web page.", - "Do you see the code in your text editor that says <h1>Hello</h1>? That's an HTML element.", + "Do you see the code in your text editor that says <h1>Hello</h1>? That's an HTML element", "Most HTML elements have an opening tag and a closing tag. Opening tags look like this: <h1>. Closing tags look like this: </h1>. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.", "Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.", "To enable the \"Go to my next challenge\" button on this exercise, change your h1 tag's text to say \"Hello World\" instead of \"Hello\"." @@ -45,7 +45,7 @@ "Willkommen bei der ersten Programmier-Challenge von Free Code Camp! Klicke auf den folgenden Button für weitere Instruktionen.", "Sehr gut. Jetzt kannst du den Rest der Instruktionen für diese Challenge lesen.", "Mithilfe des eingebauten Text Editors kannst du den Code bearbeiten.", - "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML Element.", + "Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML Element", "Die meisten HTML Elemente haben eine öffnende Auszeichnung (Tag) und eine sich schließende. Öffnende Tags sehen so aus: <h1>. Schließende Tags so: </h1>. Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags in dem Slash besteht, das bei schließenden Tags auf die sich öffnende spitze Klammer folgt.", "Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.", "Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1 Tags von \"Hello\" zu \"Hello World\"." @@ -57,10 +57,10 @@ "description": [ "Over the next few challenges, we'll build an HTML5 app that will look something like this:", "\"A", - "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element.", "The h2 element you enter will create an h2 element on the website.", "This element tells the browser how to render the text that it contains.", - "h2 elements are slightly smaller than h1 elements. There are also h3, h4, h5 and h6 elements." + "h2 elements are slightly smaller than h1 elements. There are also h3, h4, h5 and h6 elements.", + "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element." ], "tests": [ "assert(($(\"h2\").length > 0), 'Create an h2 element.')", @@ -84,7 +84,7 @@ "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." + "Los elementos h2 son ligeramente más pequeños que los elementos h1. También hay elementos h3, h4, h5 y h6" ], "namePt": "", "descriptionPt": [], @@ -100,9 +100,9 @@ "id": "bad87fee1348bd9aedf08801", "title": "Inform with the Paragraph Element", "description": [ - "Create a p element below your h2 element, and give it the text \"Hello Paragraph\".", "p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", - "You can create a p element like so: <p>I'm a p tag!</p>." + "You can create a p element like so: <p>I'm a p tag!</p>", + "Create a p element below your h2 element, and give it the text \"Hello Paragraph\"." ], "tests": [ "assert(($(\"p\").length > 0), 'Create a p element.')", @@ -123,9 +123,9 @@ "descriptionRu": [], "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>.", + "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>." + "Tú puedes crear un elemento párrafo como éste: <p>I'm a p tag!</p>" ], "namePt": "", "descriptionPt": [], @@ -140,10 +140,10 @@ "id": "bad87fee1348bd9aedf08802", "title": "Uncomment HTML", "description": [ - "Uncomment your h1, h2 and p elements.", "Commenting is a way that you can leave comments within your code without affecting the code itself.", "Commenting is also a convenient way to make code inactive without having to delete it entirely.", - "You can start a comment with <!-- and end a comment with -->." + "You can start a comment with <!-- and end a comment with -->", + "Uncomment your h1, h2 and p elements." ], "tests": [ "assert($(\"h1\").length > 0, 'Make your h1 element visible on your page by uncommenting it.')", @@ -170,10 +170,10 @@ "descriptionRu": [], "nameEs": "Waypoint: Quitar comentarios HTML", "descriptionEs": [ - "Quitar el comentario a los elementos h1, h2 y p.", + "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 -->." + "Puedes comenzar un comentario con <!-- y terminar de comentar con -->" ], "namePt": "", "descriptionPt": [], @@ -189,9 +189,9 @@ "id": "bad87fee1348bd9aedf08804", "title": "Comment out HTML", "description": [ - "Comment out your h1 element and your p element, but leave your h2 element uncommented.", - "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->.", - "Here you'll need to end the comment before your h2 element begins." + "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->", + "Here you'll need to end the comment before your h2 element begins.", + "Comment out your h1 element and your p element, but leave your h2 element uncommented." ], "tests": [ "assert(($(\"h1\").length === 0), 'Comment out your h1 element so that it is not visible on your page.')", @@ -218,8 +218,8 @@ "descriptionRu": [], "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 -->.", + "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": "", @@ -237,8 +237,8 @@ "description": [ "Web developers traditionally use lorem ipsum text as placeholder text. It's called lorem ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.", "lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", - "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text.", - "Replace the text inside your p element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text", + "Replace the text inside your p element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "tests": [ "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), 'Your p element should contain the first few words of the provided kitty ipsum text.')" @@ -260,7 +260,7 @@ "descriptionRu": [], "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.", + "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!", @@ -281,9 +281,9 @@ "id": "bad87fed1348bd9aedf08833", "title": "Delete HTML Elements", "description": [ - "Delete your h1 element so we can simplify our view.", "Our phone doesn't have much vertical space.", - "Let's remove the unnecessary elements so we can start building our CatPhotoApp." + "Let's remove the unnecessary elements so we can start building our CatPhotoApp.", + "Delete your h1 element so we can simplify our view." ], "tests": [ "assert(($(\"h1\").length == 0), 'Delete your h1 element.')", @@ -324,10 +324,11 @@ "id": "bad87fee1348bd9aedf08803", "title": "Change the Color of Text", "description": [ - "Change your h2 element's style so that its text color is red.", - "We can do this by changing the \"style\" of your h2 element.", + "Now let's change the color of some of our text.", + "We can do this by changing the style of your h2 element.", "The style that is responsible for the color of an element's text is the \"color\" style.", - "Here's how you would set your h2 element's text color to blue: <h2 style=\"color: blue\">CatPhotoApp</h2>." + "Here's how you would set your h2 element's text color to blue: <h2 style=\"color: blue\">CatPhotoApp</h2>", + "Change your h2 element's style so that its text color is red." ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.')" @@ -348,9 +349,9 @@ "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.", + "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>." + "Así es como podrías volver el color de texto de tu elemento h2 en azul: <h2 style=\"color: blue\">CatPhotoApp</h2>" ], "namePt": "", "descriptionPt": [], @@ -358,20 +359,23 @@ "descriptionDe": [ "Ändere den Style des h2 Elements, damit die Textfarbe Rot ist.", "Wir können das bewerkstelligen, indem wir den \"style\" des h2 Elements ändern.", - "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>." + "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>" ] }, { "id": "bad87fee1348bd9aedf08805", "title": "Use CSS Selectors to Style Elements", "description": [ - "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue.", "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", - "When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were giving that individual h2 element an inline style.", - "That's one way to add style to an element, but a better way is by using CSS, which stands for Cascading Style Sheets.", - "At the top of your code, create a style element like this: <style></style>.", - "Inside that style element, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2 {color: red;}</style>.", - "Note that it's important to have both opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles." + "When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were giving that individual h2 element an inline style", + "That's one way to add style to an element, but a better way is by using CSS, which stands for Cascading Style Sheets", + "At the top of your code, create a style element like this: <style></style>", + "Inside that style element, you can create a CSS selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this:", + "<style>", + "  h2 {color: red;}", + "</style>", + "Note that it's important to have both opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.", + "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue." ], "tests": [ "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2 element.')", @@ -396,10 +400,10 @@ "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>.", + "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": "", @@ -419,7 +423,6 @@ "id": "bad87fee1348bd9aecf08806", "title": "Use a CSS Class to Style an Element", "description": [ - "Create a CSS class called red-text and apply it to your h2 element.", "Classes are reusable styles that can be added to HTML elements.", "Here's an example CSS class declaration:", "<style>", @@ -428,9 +431,10 @@ "  }", "</style>", "You can see that we've created a CSS class called blue-text within the <style> tag.", - "You can apply a class to an HTML element like this: <h2 class=\"blue-text\">CatPhotoApp</h2>.", + "You can apply a class to an HTML element like this: <h2 class=\"blue-text\">CatPhotoApp</h2>", "Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.", - "Instead of creating a new style element, try removing the h2 style declaration from your existing style element, then replace it with the class declaration for .red-text." + "Instead of creating a new style element, try removing the h2 style declaration from your existing style element, then replace it with the class declaration for .red-text", + "Create a CSS class called red-text and apply it to your h2 element." ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.')", @@ -458,12 +462,12 @@ "descriptionRu": [], "nameEs": "Waypoint: Utiliza una clase CSS para darle estilo a un elemento", "descriptionEs": [ - "Crea una clase CSS llamada \"red-text\" y aplicala a tu elemento h2.", + "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", - "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>.", + "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\"." ], @@ -476,7 +480,7 @@ "So sieht eine CSS Klasse aus:", "\"Ein", "Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <style> geschrieben haben.", - "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <h2 class=\"blue-text\">CatPhotoApp</h2>.", + "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <h2 class=\"blue-text\">CatPhotoApp</h2>", "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." ] @@ -485,15 +489,20 @@ "id": "bad87fee1348bd9aefe08806", "title": "Style Multiple Elements with a CSS Class", "description": [ - "Apply the red-text class to your h2 and p elements.", "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", - "Remember that CSS class selectors require a period at the beginning like this: .blue-text { color: blue; }, but that class declarations don't use a period, like this: <h2 class=\"blue-text\">CatPhotoApp<h2>." + "Remember that CSS class selectors require a period at the beginning like this:", + ".blue-text {", + "  color: blue;", + "}", + "But also remember that class declarations don't use a period, like this:", + "<h2 class=\"blue-text\">CatPhotoApp<h2>", + "Apply the red-text class to your h2 and p elements." ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your h2 element should be red.')", - "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text.')", + "assert($(\"h2\").hasClass(\"red-text\"), 'Your h2 element should have the class red-text')", "assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your p element should be red.')", - "assert($(\"p\").hasClass(\"red-text\"), 'Your p element should have the class red-text.')" + "assert($(\"p\").hasClass(\"red-text\"), 'Your p element should have the class red-text')" ], "challengeSeed": [ "" - ], - "type": "waypoint", - "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], - "nameEs": "", - "descriptionEs": [], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] } ] } diff --git a/server/utils/resources.json b/server/utils/resources.json index a634575437..c80b9dafa7 100644 --- a/server/utils/resources.json +++ b/server/utils/resources.json @@ -70,7 +70,7 @@ "Ride like the wind!", "Legen - wait for it - dary!", "Ludicrous Speed! Go!", - "Yes you can!", + "Yes we can!", "Most triumphant!", "One loop to rule them all!", "By the power of Grayskull!",