diff --git a/challenges/01-front-end-development-certification/html5-and-css.json b/challenges/01-front-end-development-certification/html5-and-css.json index a440aa72ad..4aafe3e436 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -5,7 +5,6 @@ "challenges": [ { "id": "bd7123c8c441eddfaeb5bdef", - "title": "Say Hello to HTML Elements", "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.", @@ -19,20 +18,14 @@ "Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing, you can advance to the next challenge.", "To pass the test on this challenge, change your h1 element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button." ], - "tests": [ - "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'message: Your h1 element should have the text \"Hello World\".');" - ], "challengeSeed": [ "

Hello

" ], + "tests": [ + "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'message: Your h1 element should have the text \"Hello World\".');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Saluda a los Elementos HTML", "descriptionEs": [ "¡Bienvenido/a al primer desafío de programación de Free Code Camp!", @@ -42,9 +35,8 @@ "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": [], "nameDe": "Waypoint: Begrüße die HTML Elemente", + "title": "Say Hello to HTML Elements", "descriptionDe": [ "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.", @@ -57,7 +49,6 @@ }, { "id": "bad87fee1348bd9aedf0887a", - "title": "Headline with the h2 Element", "description": [ "Over the next few challenges, we'll build an HTML5 app that will look something like this:", "\"A", @@ -66,23 +57,17 @@ "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." ], + "challengeSeed": [ + "

Hello World

" + ], "tests": [ "assert(($(\"h2\").length > 0), 'message: Create an h2 element.');", "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/

/g).length, 'message: Make sure your h2 element has a closing tag.');", "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your h2 element should have the text \"CatPhotoApp\".');", "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your h1 element should have the text \"Hello World\".');" ], - "challengeSeed": [ - "

Hello World

" - ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Encabezado con el elemento h2", "descriptionEs": [ "Durante los siguientes desafios, construiremos una aplicación HTML que lucirá como la siguiente:", @@ -92,9 +77,8 @@ "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": [], "nameDe": "Waypoint: Überschrift mit dem h2 Element", + "title": "Headline with the h2 Element", "descriptionDe": [ "Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht.", "Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.", @@ -104,39 +88,31 @@ }, { "id": "bad87fee1348bd9aedf08801", - "title": "Inform with the Paragraph Element", "description": [ "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 this:", "<p>I'm a p tag!</p>", "Create a p element below your h2 element, and give it the text \"Hello Paragraph\"." ], + "challengeSeed": [ + "

Hello World

", + "

CatPhotoApp

" + ], "tests": [ "assert(($(\"p\").length > 0), 'message: Create a p element.');", "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your p element should have the text \"Hello Paragraph\".');", "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/

p element has a closing tag.');" ], - "challengeSeed": [ - "

Hello World

", - "

CatPhotoApp

" - ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Informa con el Elemento Párrafo", "descriptionEs": [ "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": [], "nameDe": "Waypoint: Informiere mit dem Paragraph Element", + "title": "Inform with the Paragraph Element", "descriptionDe": [ "Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein.", "p Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".", @@ -145,19 +121,12 @@ }, { "id": "bad87fee1348bd9aedf08802", - "title": "Uncomment HTML", "description": [ "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 -->", "Uncomment your h1, h2 and p elements." ], - "tests": [ - "assert($(\"h1\").length > 0, 'message: Make your h1 element visible on your page by uncommenting it.');", - "assert($(\"h2\").length > 0, 'message: Make your h2 element visible on your page by uncommenting it.');", - "assert($(\"p\").length > 0, 'message: Make your p element visible on your page by uncommenting it.');", - "assert(!/-->/gi.test(code), 'message: Be sure to delete all trailing comment tags, i.e. -->.');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"h1\").length > 0, 'message: Make your h1 element visible on your page by uncommenting it.');", + "assert($(\"h2\").length > 0, 'message: Make your h2 element visible on your page by uncommenting it.');", + "assert($(\"p\").length > 0, 'message: Make your p element visible on your page by uncommenting it.');", + "assert(!/-->/gi.test(code), 'message: Be sure to delete all trailing comment tags, i.e. -->.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Quita comentarios HTML", "descriptionEs": [ "\"Comentar\" es una manera en la que puedes dejar anotaciones en tu código sin afectar el código mismo.", @@ -182,9 +151,8 @@ "Puedes comenzar un comentario con <!-- y terminar de comentar con -->", "Quita el comentario a los elementos h1, h2 y p" ], - "namePt": "", - "descriptionPt": [], "nameDe": "Waypoint: HTML entkommentieren", + "title": "Uncomment HTML", "descriptionDe": [ "Entkommentiere deine h1, h2 und p Elemente.", "Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.", @@ -194,18 +162,11 @@ }, { "id": "bad87fee1348bd9aedf08804", - "title": "Comment out HTML", "description": [ "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), 'message: Comment out your h1 element so that it is not visible on your page.');", - "assert(($(\"h2\").length > 0), 'message: Leave your h2 element uncommented so that it is visible on your page.');", - "assert(($(\"p\").length === 0), 'message: Comment out your p element so that it is not visible on your page.');", - "assert(code.match(/-->/g).length > 1, 'message: Be sure to close each of your comments with -->.');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert(($(\"h1\").length === 0), 'message: Comment out your h1 element so that it is not visible on your page.');", + "assert(($(\"h2\").length > 0), 'message: Leave your h2 element uncommented so that it is visible on your page.');", + "assert(($(\"p\").length === 0), 'message: Comment out your p element so that it is not visible on your page.');", + "assert(code.match(/-->/g).length > 1, 'message: Be sure to close each of your comments with -->.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Comenta en HTML", "descriptionEs": [ "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.", "Comenta el elemento h1 y el elemento p, pero deja sin comentar el elemento h2" ], - "namePt": "", - "descriptionPt": [], "nameDe": "Waypoint: HTML auskommentieren", + "title": "Comment out HTML", "descriptionDe": [ "Kommentiere die Elemente h1 und p aus, aber lasse dein h2 Element unkommentiert.", "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.", @@ -240,16 +200,12 @@ }, { "id": "bad87fee1348bd9aedf08833", - "title": "Fill in the Blank with Placeholder Text", "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." ], - "tests": [ - "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');" - ], "challengeSeed": [ "

Hello World

", "", @@ -257,14 +213,11 @@ "", "

Hello Paragraph

" ], + "tests": [ + "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided kitty ipsum text.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Llena espacios con texto de relleno", "descriptionEs": [ "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.", @@ -272,9 +225,8 @@ "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": [], "nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text", + "title": "Fill in the Blank with Placeholder Text", "descriptionDe": [ "Ersetze den Text in deinem p Element mit den ersten Wörtern des zur Verfügung gestellten \"Kitty Ipsum\" Textes.", "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum\" Text als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.", @@ -285,17 +237,11 @@ }, { "id": "bad87fed1348bd9aedf08833", - "title": "Delete HTML Elements", "description": [ "Our phone doesn't have much vertical space.", "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), 'message: Delete your h1 element.');", - "assert(($(\"h2\").length > 0), 'message: Leave your h2 element on the page.');", - "assert(($(\"p\").length > 0), 'message: Leave your p element on the page.');" - ], "challengeSeed": [ "

Hello World

", "", @@ -303,23 +249,21 @@ "", "

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(($(\"h1\").length == 0), 'message: Delete your h1 element.');", + "assert(($(\"h2\").length > 0), 'message: Leave your h2 element on the page.');", + "assert(($(\"p\").length > 0), 'message: Leave your p element on the page.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Borra elementos HTML", "descriptionEs": [ "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": [], "nameDe": "Waypoint: Entferne HTML Elemente", + "title": "Delete HTML Elements", "descriptionDe": [ "Lösche die Elemente h1, damit wir etwas Ordnung schaffen.", "Unser Smartphone hat nicht sehr viel vertikalen Raum.", @@ -328,7 +272,6 @@ }, { "id": "bad87fee1348bd9aedf08803", - "title": "Change the Color of Text", "description": [ "Now let's change the color of some of our text.", "We can do this by changing the style of your h2 element.", @@ -337,22 +280,16 @@ "<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)\", 'message: Your h2 element should be red.');" - ], "challengeSeed": [ "

CatPhotoApp

", "", "

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($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Cambia el color del texto", "descriptionEs": [ "Ahora cambiemos el color de parte de nuestro texto.", @@ -362,9 +299,8 @@ "<h2 style=\"color: blue\">CatPhotoApp</h2>", "Cambia el estilo del elemento h2 de manera que el color de su texto sea rojo." ], - "namePt": "", - "descriptionPt": [], "nameDe": "Waypoint: Ändere die Farbe des Textes", + "title": "Change the Color of Text", "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.", @@ -373,7 +309,6 @@ }, { "id": "bad87fee1348bd9aedf08805", - "title": "Use CSS Selectors to Style Elements", "description": [ "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.", @@ -388,6 +323,11 @@ "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." ], + "challengeSeed": [ + "

CatPhotoApp

", + "", + "

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(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from your h2 element.');", "assert($(\"style\") && $(\"style\").length > 1, 'message: Create a style element.');", @@ -395,19 +335,8 @@ "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');", "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(//g) || []).length, 'message: Make sure all your style elements are valid and have a closing tag.');" ], - "challengeSeed": [ - "

CatPhotoApp

", - "", - "

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

" - ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa selectores CSS para dar estilo a los elementos", "descriptionEs": [ "Con CSS, hay cientos de propiedades CSS que puedes usar para cambiar como un elemento se ve en una página web.", @@ -421,9 +350,8 @@ "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": [], "nameDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten", + "title": "Use CSS Selectors to Style Elements", "descriptionDe": [ "Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben.", "CSS liefert dir hunderte Attribute oder \"attributes\" um HTML Elemente auf deiner Seite zu gestalten.", @@ -436,7 +364,6 @@ }, { "id": "bad87fee1348bd9aecf08806", - "title": "Use a CSS Class to Style an Element", "description": [ "Classes are reusable styles that can be added to HTML elements.", "Here's an example CSS class declaration:", @@ -449,14 +376,8 @@ "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", - "Create a CSS class called red-text and apply it to your h2 element." - ], - "tests": [ - "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your h2 element should be red.');", - "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');", - "assert(code.match(/\\.red-text\\s*\\{\\s*color:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a red-text class and have its color set to red.');", - "assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like style=\"color: red\" in your h2 element.');" + "Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.", + "Give your h2 element the class attribute with a value of 'red-text'." ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your body element the background-color of black.');", + "assert(code.match(/" + ], "tests": [ "assert(($(\"h1\").length > 0), 'message: Create an h1 element.');", "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'message: Your h1 element should have the text Hello World.');", @@ -3456,22 +3080,8 @@ "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'message: Your h1 element should inherit the font Monospace from your body element.');", "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Your h1 element should inherit the color green from your body element.');" ], - "challengeSeed": [ - "" - ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Hereda estilos del elemento cuerpo", "descriptionEs": [ "Ya hemos demostrado que cada página HTML tiene un cuerpo (body), y que puede dársele estilo CSS.", @@ -3479,11 +3089,7 @@ "En primer lugar, crea un elemento h1 con el texto Hello World", "Después, vamos a darle a todos los elementos de tu página el color verde (green) añadiendo color: green; a la declaración de estilo de tu elemento body.", "Por último, da a tu elemento body el tipo de letra Monospace añadiendo font-family: Monospace; a la declaración del estilo de tu elemento body." - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08756", @@ -3495,10 +3101,6 @@ "Create a CSS class called pink-text that gives an element the color pink.", "Give your h1 element the class of pink-text." ], - "tests": [ - "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", - "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');" - ], "challengeSeed": [ "", "

Hello World!

" ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Priorizar un estilo sobre otro", "descriptionEs": [ "A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.", @@ -3524,11 +3124,7 @@ "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (override) nuestra clase la propiedad CSS color: green del elemento body?", "Crea una clase CSS llamada pink-text que le da a un elemento el color rosado.", "Ponle a tu elemento h1 la clase de pink-text." - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf04756", @@ -3542,12 +3138,6 @@ "class=\"class1 class2\"", "Note: It doesn't matter which order the classes are listed in." ], - "tests": [ - "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", - "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", - "assert($(\".pink-text\").hasClass(\"blue-text\"), 'message: Both blue-text and pink-text should belong to the same h1 element.');", - "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your h1 element should be blue.');" - ], "challengeSeed": [ "", "

Hello World!

" ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\".pink-text\").hasClass(\"blue-text\"), 'message: Both blue-text and pink-text should belong to the same h1 element.');", + "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your h1 element should be blue.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Anula estilos con CSS posterior", "descriptionEs": [ "¡Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento body!", @@ -3578,11 +3168,7 @@ "La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:", "class=\"class1 class2\"", "Nota: No importa lo que ordenan las clases se enumeran en el." - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd8aedf06756", @@ -3600,14 +3186,6 @@ "}", "Note: It doesn't matter whether you declare this css above or below pink-text class, since id attribute will always take precedence." ], - "tests": [ - "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", - "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", - "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Give your h1 element the id of orange-text.');", - "assert(code.match(/#orange-text\\s*{/gi), 'message: Create a CSS declaration for your orange-text id');", - "assert(!code.match(//gi), 'message: Do not give your h1 any style attributes.');", - "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'message: Your h1 element should be orange.');" - ], "challengeSeed": [ "", "

Hello World!

" ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Give your h1 element the id of orange-text.');", + "assert(code.match(/#orange-text\\s*{/gi), 'message: Create a CSS declaration for your orange-text id');", + "assert(!code.match(//gi), 'message: Do not give your h1 any style attributes.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'message: Your h1 element should be orange.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Anula la declaración de clases dando estilo a los atributos ID", "descriptionEs": [ "Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ", @@ -3645,11 +3225,7 @@ "  color: brown;", "}", "Nota: No importa si usted declara este css encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad." - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf06756", @@ -3661,13 +3237,6 @@ "<h1 style=\"color: green\">", "Leave the blue-text and pink-text classes on your h1 element." ], - "tests": [ - "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", - "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", - "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your h1 element should have the id of orange-text.');", - "assert(code.match(/h1 element the inline style of color: white.');", - "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'message: Your h1 element should be white.');" - ], "challengeSeed": [ "", "

Hello World!

" ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your h1 element should have the id of orange-text.');", + "assert(code.match(/h1 element the inline style of color: white.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'message: Your h1 element should be white.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Anula declaraciones de clase con estilos en línea", "descriptionEs": [ "Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS style.", @@ -3702,11 +3272,7 @@ "Utiliza un estilo en línea para tratar de hacer blanco nuestro elemento h1. Recuerda, los estilos en línea se ven así: ", "<h1 style=\"color: green\">", "Deja las clases blue-text y pink-text en tu elemento h1." - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf07756", @@ -3720,14 +3286,6 @@ "An example of how to do this is:", "color: red !important;" ], - "tests": [ - "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", - "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", - "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your h1 element should have the id of orange-text.');", - "assert(code.match(/h1 element should have the inline style of color: white.');", - "assert(code.match(/pink.*\\!important;/gi), 'message: Your pink-text class should have the !important keyword to override all other declarations.');", - "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');" - ], "challengeSeed": [ "", "

Hello World!

" ], + "tests": [ + "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your h1 element should have the class pink-text.');", + "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your h1 element should have the class blue-text.');", + "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your h1 element should have the id of orange-text.');", + "assert(code.match(/h1 element should have the inline style of color: white.');", + "assert(code.match(/pink.*\\!important;/gi), 'message: Your pink-text class should have the !important keyword to override all other declarations.');", + "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your h1 element should be pink.');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Anula todos los demás estilos utilizando Important", "descriptionEs": [ "¡Hurra! Demostramos que los estilos en línea anularán todas las declaraciones CSS de tu elemento style. ", @@ -3764,11 +3324,7 @@ "Vamos a añadir la palabra clave !important a tu declaración del color de pink-text para estar 100% seguros que tu elemento h1 será rosado.", "Un ejemplo de cómo hacer esto es:", "color: red !important;" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08726", @@ -3779,10 +3335,6 @@ "With CSS, we use 6 hexadecimal numbers to represent colors. For example, #000000 is the lowest possible value, and it represents the color black.", "Replace the word black in our body element's background-color with its hex code representation, #000000." ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your body element the background-color of black.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color black instead of the word black. For example body { color: #000000; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your body element the background-color of black.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color black instead of the word black. For example body { color: #000000; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa el código hexadecimal para especificar colores", "descriptionEs": [ "¿Sabías que hay otras maneras de representar los colores en CSS? Una de estas formas es llamada código hexadecimal o código hex para abreviar. ", "El sistema Decimal se refiere al que nos permite representar cantidades empleando los dígitos del cero al nueve - los números que la gente usa en la vida cotidiana. El sistema Hexadecimal incluye estos 10 dígitos más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 dígitos posibles, en lugar de las 10 posibles que nos da nuestro sistema numérico normal en base 10. ", "Con CSS, utilizamos 6 dígitos hexadecimales para representar los colores. Por ejemplo, #000000 es el valor más bajo posible, y representa el color negro. ", "Reemplaza la palabra black en el color de fondo (background-color) de nuestro elemento body por su representación hexadecimal #000000" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08725", @@ -3818,10 +3364,6 @@ "F is the highest number in hex code, and it represents the maximum possible brightness.", "Let's turn our body element's background-color white by changing its hex code to #FFFFFF" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your body element should have the background-color of white.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFF(FFF)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color white instead of the word white. For example body { color: #FFFFFF; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your body element should have the background-color of white.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFF(FFF)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color white instead of the word white. For example body { color: #FFFFFF; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa el código hexadecimal para colorear de blanco los elementos", "descriptionEs": [ "0 es el dígito más bajo en código hexadecimal, y representa una completa ausencia de color.", "F es el dígito más alto en código hexadecimal, y representa el máximo brillo posible.", "Volvamos blanco el color de fondo (background-color) de nuestro elemento body, cambiando su código hexadecimal por #FFFFFF" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08724", @@ -3858,10 +3394,6 @@ "So to get the absolute brightest red, you would just use F for the first and second digits (the highest possible value) and 0 for the third, fourth, fifth and sixth digits (the lowest possible value).", "Make the body element's background color red by giving it the hex code value of #FF0000" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your body element the background-color of red.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((F00)|(FF0000))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your body element the background-color of red.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((F00)|(FF0000))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa el código hexadecimal para colorear de rojo los elementos", "descriptionEs": [ "Te puedes estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ", @@ -3884,11 +3414,7 @@ "Los códigos hexadecimales siguen el formato rojo-verde-azul (red-green-blue) o formato rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el dígito más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el dígito más bajo posible).", "Haz que el color de fondo (background-color) del elemento body sea rojo dándole el código hexadecimal #FF0000" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08723", @@ -3898,10 +3424,6 @@ "So to get the absolute brightest green, you would just use F for the third and fourth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).", "Make the body element's background color green by giving it the hex code value of #00FF00" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Give your body element the background-color of green.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((0F0)|(00FF00))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color green instead of the word green. For example body { color: #00FF00; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Give your body element the background-color of green.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((0F0)|(00FF00))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color green instead of the word green. For example body { color: #00FF00; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa el código hexadecimal para colorear de verde los elementos", "descriptionEs": [ "Recuerda que el código hexadecimal sigue el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul.", "Así que para conseguir el verde absoluto más brillante, sólo usas F en el tercer y cuarto dígitos (el dígito más alto posible) y 0 para todos los otros dígitos (el dígito más bajo posible). ", "Haz que el color de fondo (background-color) del elemento body sea verde, dándole el código hexadecimal #00FF00" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08722", @@ -3936,10 +3452,6 @@ "So to get the absolute brightest blue, we use F for the fifth and sixth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).", "Make the body element's background color blue by giving it the hex code value of #0000FF" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Give your body element the background-color of blue.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((00F)|(0000FF))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color blue instead of the word blue. For example body { color: #0000FF; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Give your body element the background-color of blue.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((00F)|(0000FF))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color blue instead of the word blue. For example body { color: #0000FF; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa el código hexadecimal para colorear de azul los elementos", "descriptionEs": [ "Los códigos hexadecimales siguen el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representar la cantidad de azul .", "Así que para conseguir el azul absoluto más brillante, utilizamos F para la quinta y sexta cifras (el dígito más alto posible) y 0 para todos los otros dígitos (el dígito más bajo posible ). ", "Haz que el color de fondo (background-color) del elemento body sea azul, dándole el código hexadecimal #0000FF" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08721", @@ -3974,10 +3480,6 @@ "For example, orange is pure red, mixed with some green, and no blue.", "Make the body element's background color orange by giving it the hex code value of #FFA500" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Give your body element the background-color of orange.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFA500((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color orange instead of the word orange. For example body { color: #FFA500; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Give your body element the background-color of orange.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFA500((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color orange instead of the word orange. For example body { color: #FFA500; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa código hex para mezclar colores", "descriptionEs": [ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.", "Haz que el color de fondo del elemento body sea anaranjado, dándole el código hexadecimal #FFA500" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aede08720", @@ -4012,10 +3508,6 @@ "We can also create different shades of gray by evenly mixing all three colors.", "Make the body element's background color gray by giving it the hex code value of #808080" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Give your body element the background-color of gray.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#808080((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code the color gray instead of the word gray. For example body { color: #808080; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Give your body element the background-color of gray.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#808080((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code the color gray instead of the word gray. For example body { color: #808080; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa el código hexadecimal para colorear de gris los elementos", "descriptionEs": [ "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", "También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.", "Haz que el color de fondo del elemento body sea gris, dándole el código hexadecimal #808080" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08720", @@ -4049,10 +3535,6 @@ "We can also create other shades of gray by evenly mixing all three colors. We can go very close to true black.", "Make the body element's background color a dark gray by giving it the hex code value of #111111" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'message: Give your body element the background-color of a dark gray.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#111(111)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use hex code to make a dark gray. For example body { color: #111111; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'message: Give your body element the background-color of a dark gray.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#111(111)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use hex code to make a dark gray. For example body { color: #111111; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa el código hexadecimal para colorear con tonos grises", "descriptionEs": [ "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aedf08719", @@ -4087,10 +3563,6 @@ "This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.", "Go ahead, try using #F00 to turn the body element's background-color red." ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your body element the background-color of red.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#F00((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use abbreviated hex code instead of a six-character hex code. For example body { color: #F00; }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your body element the background-color of red.');", + "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#F00((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use abbreviated hex code instead of a six-character hex code. For example body { color: #F00; }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Uso código hex abreviado", "descriptionEs": [ "Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente puedes acortarlo. ", "Por ejemplo, el rojo, que es #FF0000 en código hexadecimal, se puede abreviar a #F00. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ", "Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán #FF0000 y #F00 como exactamente el mismo color. ", "Adelante, intente usar #F00 para volver rojo el color de fondo del elemento body." - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad87fee1348bd9aede08718", @@ -4131,10 +3597,6 @@ "If you do the math, 16 times 16 is 256 total values. So rgb, which starts counting from zero, has the exact same number of possible values as hex code.", "Let's replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0)" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your body element should have a black background.');", - "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of black. For example body { background-color: rgb(0, 0, 0); }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your body element should have a black background.');", + "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of black. For example body { background-color: rgb(0, 0, 0); }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa RGB para colorear elementos", "descriptionEs": [ "Otra forma en la que puedes representar colores en CSS es usando valores rgb.", @@ -4160,12 +3620,7 @@ "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", "Si haces la matemática, 16 veces 16 es 256 valores totales. Así que rgb, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.", "Remplacemos el código hexadecimal del color de fondo de nuestro elemento body por el valor RGB para el negro: rgb(0, 0, 0)" - ], - - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad88fee1348bd9aedf08726", @@ -4178,10 +3633,6 @@ "Instead of using six hexadecimal digits like you do with hex code, with rgb you specify the brightness of each color with a number between 0 and 255.", "Change the body element's background color from the RGB value for black to the rgb value for white: rgb(255, 255, 255)" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your body should have a white background.');", - "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of white. For example body { background-color: rgb(255, 255 , 255); }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your body should have a white background.');", + "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of white. For example body { background-color: rgb(255, 255 , 255); }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa RGB para colorear de blanco los elementos", "descriptionEs": [ "El valor RGB para el negro, luce así:", @@ -4205,11 +3654,7 @@ "rgb(255, 255, 255)", "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", "Cambia el color de fondo del elemento body del valor RGB para el negro al valor rgb para el blanco: rgb(255, 255, 255)" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad89fee1348bd9aedf08724", @@ -4219,10 +3664,6 @@ "These values follow the pattern of RGB: the first number represents red, the second number represents green, and the third number represents blue.", "Change the body element's background color to the RGB value red: rgb(255, 0, 0)" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Your body should have a red background.');", - "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of red. For example body { background-color: rgb(255, 0, 0); }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Your body should have a red background.');", + "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of red. For example body { background-color: rgb(255, 0, 0); }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa RGB para colorear de rojo los elementos", "descriptionEs": [ "Al igual que con el código hexadecimal, puedes representar diferentes colores en RGB mediante el uso de combinaciones de diferentes valores.", "Estos valores siguen el patrón de RGB: el primer número representa rojo, el segundo número representa el verde, y el tercer número representa azul.", "Cambia el color de fondo del elemento body al rojo usando su valor RGB: rgb(255, 0, 0)" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad80fee1348bd9aedf08723", @@ -4255,10 +3690,6 @@ "description": [ "Now change the body element's background color to the rgb value green: rgb(0, 255, 0)" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Your body element should have a green background.');", - "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of green. For example body { background-color: rgb(0, 255, 0); }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Your body element should have a green background.');", + "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of green. For example body { background-color: rgb(0, 255, 0); }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa RGB para colorear de verde los elementos", "descriptionEs": [ "Ahora cambia el color de fondo del elemento body a verde usando su valor RGB: rgb (0, 255, 0)" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad81fee1348bd9aedf08722", @@ -4289,10 +3714,6 @@ "description": [ "Change the body element's background color to the RGB value blue: rgb(0, 0, 255)" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Your body element should have a blue background.');", - "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of blue. For example body { background-color: rgb(0, 0, 255); }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Your body element should have a blue background.');", + "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of blue. For example body { background-color: rgb(0, 0, 255); }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa RGB para colorear de azul los elementos", "descriptionEs": [ "Cambia el color de fondo del elemento body a azul usando su valor RGB: rgb(0, 0, 255)" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] }, { "id": "bad82fee1348bd9aedf08721", @@ -4324,10 +3739,6 @@ "Just like with hex code, you can mix colors in RGB by using combinations of different values.", "Change the body element's background color to the RGB value orange: rgb(255, 165, 0)" ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Your body element should have an orange background.');", - "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of orange. For example body { background-color: rgb(255, 165, 0); }');" - ], "challengeSeed": [ "" ], + "tests": [ + "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Your body element should have an orange background.');", + "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of orange. For example body { background-color: rgb(255, 165, 0); }');" + ], "type": "waypoint", "challengeType": 0, - "nameCn": "", - "descriptionCn": [], - "nameFr": "", - "descriptionFr": [], - "nameRu": "", - "descriptionRu": [], "nameEs": "Usa RGB para mezclar colores", "descriptionEs": [ "Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.", "Cambia el color de fondo del elemento body a anaranjado usando su valor RGB: rgb(255, 165, 0)" - ], - "namePt": "", - "descriptionPt": [], - "nameDe": "", - "descriptionDe": [] + ] } ] }