freeCodeCamp/seed/challenges/html5-and-css.json

{
  "name": "HTML5 and CSS",
  "order": 2,
  "time": "5h",
  "challenges": [
    {
      "id": "bd7123c8c441eddfaeb5bdef",
      "title": "Say Hello to HTML Elements",
      "description": [
        "Welcome to Free Code Camp's first coding challenge.",
        "You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
        "Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
        "Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.",
        "Opening tags look like this:",
        "<code>&#60;h1&#62;</code>",
        "Closing tags look like this:",
        "<code>&#60;/h1&#62;</code>",
        "Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
        "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 <code>h1</code> 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 <code>h1</code> element should have the text \"Hello World\".');"
      ],
      "challengeSeed": [
        "<h1>Hello</h1>"
      ],
      "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!",
        "Puedes editar tu <code>código</code> en tu <code>editor de texto</code>, que hemos incrustado en esta página web.",
        "¿Ves el código en tu editor de texto que dice <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? Ese es un <code>elemento</code> HTML.",
        "La mayoría de los elementos HTML tienen una <code>etiqueta de apertura</code> y una <code>etiqueta de cierre</code>. Las etiquetas de apertura se ven como: <code>&#60;h1&#62;</code>. Las etiquetas de cierre se ven como: <code>&#60;/h1&#62;</code>. 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 (<).",
        "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 <code>h1</code> 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",
      "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.",
        "Mithilfe des eingebauten <code>Text Editors</code> kannst du den <code>Code</code> bearbeiten.",
        "Siehst du den Code <code>&#60;h1&#62;Hallo&#60;/h1&#62;</code> im Editor? Das ist ein HTML <code>Element</code>",
        "Die meisten HTML Elemente haben eine <code>öffnende Auszeichnung (Tag)</code> und eine <code>sich schließende</code>. Öffnende Tags sehen so aus: <code>&#60;h1&#62;</code>. Schließende Tags so: <code>&#60;/h1&#62;</code>. 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 <code>h1</code> Tags von \"Hello\" zu \"Hello World\"."
      ]
    },
    {
      "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 href=\"http://i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
        "The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
        "This element tells the browser how to render the text that it contains.",
        "<code>h2</code> elements are slightly smaller than <code>h1</code> elements. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements.",
        "Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
      ],
      "tests": [
        "assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.');",
        "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.');",
        "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your <code>h2</code> element should have the text \"CatPhotoApp\".');",
        "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your <code>h1</code> element should have the text \"Hello World\".');"
      ],
      "challengeSeed": [
        "<h1>Hello World</h1>"
      ],
      "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:",
        "<a href=\"http://i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/jOc1JF1.png\" title=\"Pulsa para agrandar\" alt=\"Pantallazo de la aplicación Cat Photo terminada\"></a>",
        "El elemento <code>h2</code> que ingreses creará un elemento <code>h2</code> en el sitio web.",
        "Este elemento le dice al navegador cómo mostrar el texto que contiene.",
        "Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>",
        "Agrega una etiqueta <code>h2</code> que diga \"CatPhotoApp\" para crear un segundo <code>elemento</code> HTML debajo de tu elemento <code>h1</code> \"Hello World\"."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Überschrift mit dem h2 Element",
      "descriptionDe": [
        "Füge unter <code>h1</code> \"Hello World\" ein zweites HTML Element <code>h2</code> hinzu, in dem \"CatPhotoApp\" steht.",
        "Das eingetragene <code>h2</code> Element wird ein <code>h2</code> Element auf der Website erzeugen.",
        "Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.",
        "<code>h2</code> Elemente sind ein wenig kleiner als <code>h2</code> Elemente. Es gibt auch <code>h3</code>, <code>h4</code>, <code>h5</code> und <code>h6</code> Elemente."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08801",
      "title": "Inform with the Paragraph Element",
      "description": [
        "<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
        "You can create a <code>p</code> element like this:",
        "<code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>",
        "Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
      ],
      "tests": [
        "assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.');",
        "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should have the text \"Hello Paragraph\".');",
        "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure your <code>p</code> element has a closing tag.');"
      ],
      "challengeSeed": [
        "<h1>Hello World</h1>",
        "<h2>CatPhotoApp</h2>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Informa con el Elemento Párrafo",
      "descriptionEs": [
        "Los elementos <code>p</code> 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: <code>&#60;p&#62;¡Soy una etiqueta p!&#60;/p&#62;</code>",
        "Crea un elemento <code>p</code> debajo de tu elemento <code>h2</code>, y ponle el texto \"Hello Paragraph\"."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Informiere mit dem Paragraph Element",
      "descriptionDe": [
        "Erstelle ein <code>p</code> Element unter deinem <code>h2</code> Element und füge den Text \"Hello Paragraph\" ein.",
        "<code>p</code> Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".",
        "Du kannst ein <code>p</code> Element so erzeugen: <code>&#60;p&#62;Ich bin ein p Element!&#60;/p&#62;</code>"
      ]
    },
    {
      "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 <code>&#60;!--</code> and end a comment with <code>--&#62;</code>",
        "Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
      ],
      "tests": [
        "assert($(\"h1\").length > 0, 'message: Make your <code>h1</code> element visible on your page by uncommenting it.');",
        "assert($(\"h2\").length > 0, 'message: Make your <code>h2</code> element visible on your page by uncommenting it.');",
        "assert($(\"p\").length > 0, 'message: Make your <code>p</code> element visible on your page by uncommenting it.');",
        "assert(!/-->/gi.test(code), 'message: Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.');"
      ],
      "challengeSeed": [
        "<!--",
        "<h1>Hello World</h1>",
        "",
        "<h2>CatPhotoApp</h2>",
        "",
        "<p>Hello Paragraph</p>",
        "-->"
      ],
      "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.",
        "Comentar también es una forma conveniente de desactivar código sin tener que borrarlo por completo.",
        "Puedes comenzar un comentario con <code>&#60;!--</code> y terminar de comentar con <code>--&#62;</code>",
        "Quita el comentario a los elementos <code>h1</code>, <code>h2</code> y <code>p</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: HTML entkommentieren",
      "descriptionDe": [
        "Entkommentiere deine <code>h1</code>, <code>h2</code> und <code>p</code> Elemente.",
        "Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.",
        "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.",
        "Du kannst einen Kommentar mit <code>&#60;!--</code> starten und ihn mit <code>--&#62;</code> wieder beenden."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08804",
      "title": "Comment out HTML",
      "description": [
        "Remember that in order to start a comment, you need to use <code>&#60;!--</code> and to end a comment, you need to use <code>--&#62;</code>",
        "Here you'll need to end the comment before your <code>h2</code> element begins.",
        "Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented."
      ],
      "tests": [
        "assert(($(\"h1\").length === 0), 'message: Comment out your <code>h1</code> element so that it is not visible on your page.');",
        "assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element uncommented so that it is visible on your page.');",
        "assert(($(\"p\").length === 0), 'message: Comment out your <code>p</code> 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 <code>--&#62;</code>.');"
      ],
      "challengeSeed": [
        "<!--",
        "<h1>Hello World</h1>",
        "",
        "<h2>CatPhotoApp</h2>",
        "",
        "<p>Hello Paragraph</p>",
        "-->"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Comenta en HTML",
      "descriptionEs": [
        "Recuerda que para comenzar un comentario, necesitas usar <code>&#60;!--</code> y para terminar un comentario, necesitas usar <code>--&#62;</code>",
        "Aquí necesitarás terminar el comentario antes que comience el elemento <code>h2</code>.",
        "Comenta el elemento <code>h1</code> y el elemento <code>p</code>, pero deja sin comentar el elemento <code>h2</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: HTML auskommentieren",
      "descriptionDe": [
        "Kommentiere die Elemente <code>h1</code> und <code>p</code> aus, aber lasse dein <code>h2</code> Element unkommentiert.",
        "Denk daran, dass du einen Kommentar mit <code>&#60;!--</code> anfangen und mit <code>--&#62;</code> wieder beenden kannst.",
        "Hier wirst du deinen Kommentar vor dem <code>h2</code> Element beenden müssen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08833",
      "title": "Fill in the Blank with Placeholder Text",
      "description": [
        "Web developers traditionally use <code>lorem ipsum text</code> 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 <code>kitty ipsum text</code>.",
        "Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
      ],
      "tests": [
        "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');"
      ],
      "challengeSeed": [
        "<h1>Hello World</h1>",
        "",
        "<h2>CatPhotoApp</h2>",
        "",
        "<p>Hello Paragraph</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Llena espacios con texto de relleno",
      "descriptionEs": [
        "Los desarrolladores web tradicionalmente usan <code>Lorem Ipsum</code> 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 <code>Kitty Ipsum</code>!",
        "Remplaza el texto dentro de tu elemento <code>p</code> con las primeras palabras de este texto kitty ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text",
      "descriptionDe": [
        "Ersetze den Text in deinem <code>p</code> 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.",
        "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.",
        "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber \"Kitty Ipsum\" nutzen!",
        "Hier sind die ersten paar Wörter von \"Kitty Ipsum\", die du kopieren und an die richtige Stelle einfügen kannst: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
      ]
    },
    {
      "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 <code>h1</code> element so we can simplify our view."
      ],
      "tests": [
        "assert(($(\"h1\").length == 0), 'message: Delete your <code>h1</code> element.');",
        "assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element on the page.');",
        "assert(($(\"p\").length > 0), 'message: Leave your <code>p</code> element on the page.');"
      ],
      "challengeSeed": [
        "<h1>Hello World</h1>",
        "",
        "<h2>CatPhotoApp</h2>",
        "",
        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
      ],
      "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 <code>h1</code> para simplificar nuestra vista."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Entferne HTML Elemente",
      "descriptionDe": [
        "Lösche die Elemente <code>h1</code>, damit wir etwas Ordnung schaffen.",
        "Unser Smartphone hat nicht sehr viel vertikalen Raum.",
        "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp bauen können."
      ]
    },
    {
      "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 <code>style</code> of your <code>h2</code> 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 <code>h2</code> element's text color to blue:",
        "<code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
        "Change your <code>h2</code> element's style so that its text color is red."
      ],
      "tests": [
        "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');"
      ],
      "challengeSeed": [
        "<h2>CatPhotoApp</h2>",
        "",
        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
      ],
      "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.",
        "Podemos hacer esto cambiando el <code>style</code> del elemento <code>h2</code>",
        "El estilo responsable del color de texto de un elemento es el estilo \"color\".",
        "Así es como podrías poner en azul el color de texto de tu elemento <code>h2</code>:",
        "<code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
        "Cambia el estilo del elemento <code>h2</code> de manera que el color de su texto sea rojo."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Ändere die Farbe des Textes",
      "descriptionDe": [
        "Ändere den Style des <code>h2</code> Elements, damit die Textfarbe Rot ist.",
        "Wir können das bewerkstelligen, indem wir den \"style\" des <code>h2</code> Elements ändern.",
        "So könntest du die Textfarbe des <code>h2</code> Elements in Blau ändern: <code>&#60;h2 style=\"color: blue\"&#62;CatPhotoApp&#60;/h2&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08805",
      "title": "Use CSS Selectors to Style Elements",
      "description": [
        "With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
        "When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
        "That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
        "At the top of your code, create a <code>style</code> element like this:",
        "<code>&#60;style&#62;</code>",
        "<code>&#60;/style&#62;</code>",
        "Inside that style element, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this:",
        "<code>&#60;style&#62;</code>",
        "&nbsp;&nbsp;<code>h2 {color: red;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) 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 <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue."
      ],
      "tests": [
        "assert(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from your <code>h2</code> element.');",
        "assert($(\"style\") && $(\"style\").length > 1, 'message: Create a <code>style</code> element.');",
        "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h2</code> element should be blue.');",
        "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');",
        "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'message: Make sure all your <code>style</code> elements are valid and have a closing tag.');"
      ],
      "challengeSeed": [
        "<h2 style=\"color: red\">CatPhotoApp</h2>",
        "",
        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
      ],
      "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 <code>propiedades CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.",
        "Cuando ingresaste <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;h2&#62;</code>, le estuviste dando al elemento <code>h2</cdoe> un <code>estilo en línea</code>",
        "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando <code>Hojas de Estilo en Cascada (Cascading Style Sheets, CSS)</code>.",
        "Al principio de tu código, crea un elemento <code>style</code> como este: <code>&#60;style&#62;&#60;/style&#62;</code>",
        "Dentro de ese elemento style, puedes crear un <code>selector CSS</code> para todos los elementos <code>h2</code>. Por ejemplo, si quisieras que todos los elementos <code>h2</code> fueran rojos, tu elemento style se vería así:",
        "<code>&#60;style&#62;</code>",
        "&nbsp;&nbsp;<code>h2 {color: red;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Fíjate que es importante tener llaves de apertura y de cierre (<code>{</code> y <code>}</code>) 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 <code>style</code> de tu elemento <code>h2</code> y a cambio escribe un elemento <code>style</code> CSS.  Agrea el CSS necesario para hacer todos los elementos <code>h2</code> de color azul."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten",
      "descriptionDe": [
        "Lösche das Style Attribute deines <code>h2</code> Elements und erstelle stattdessen ein CSS <code>style</code> Element. Füge das notwendige CSS hinzu, um alle <code>h2</code> Elemente Blau zu färben.",
        "CSS liefert dir hunderte Attribute oder \"attributes\" um HTML Elemente auf deiner Seite zu gestalten.",
        "Mit <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code> hast du dem einzelnen <code>h2</code> Element einen sogenannten \"inline style\" gegeben.",
        "Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser, Cascading Style Sheets (CSS) zu benutzen.",
        "Erstelle über deinem Code ein <code>style</code> Element: <code>&#60;style&#62;&#60;/style&#62;</code>",
        "Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle <code>h2</code> Elemente erstellen. Wenn du zum Beispiel alle <code>h2</code> Elemente Rot färben willst, schreibst du: <code>&#60;style&#62;h2 {color: red;}&#60;/style&#62;</code>",
        "Beachte, dass du öffnende und schließende geschwungene Klammern (<code>{</code> und <code>}</code>) um jeden Style setzen solltest. Außerdem sollten deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon."
      ]
    },
    {
      "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:",
        "<code>&#60;style&#62;</code>",
        "<code>&nbsp;&nbsp;.blue-text {</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;</code>",
        "<code>&nbsp;&nbsp;}</code>",
        "<code>&#60;/style&#62;</code>",
        "You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.",
        "You can apply a class to an HTML element like this:",
        "<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
        "Note that in your CSS <code>style</code> 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 <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for <code>.red-text</code>",
        "Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element."
      ],
      "tests": [
        "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');",
        "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.');",
        "assert(code.match(/\\.red-text\\s*\\{\\s*color:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.');",
        "assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.');"
      ],
      "challengeSeed": [
        "<style>",
        "  h2 {",
        "    color: blue;",
        "  }",
        "</style>",
        "",
        "<h2>CatPhotoApp</h2>",
        "",
        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Utiliza una clase CSS para darle estilo a un elemento",
      "descriptionEs": [
        "Las clases son estilos reutilizables que pueden añadirse a elementos HTML.",
        "Aquí esta un ejemplo de una declaración de una clase CSS:",
        "<code>&#60;style&#62;</code>",
        "<code>&nbsp;&nbsp;.blue-text {</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;</code>",
        "<code>&nbsp;&nbsp;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <code>&#60;style&#62;</code>",
        "Puedes aplicar una clase a un elemento HTML de esta manera:",
        "<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
        "Nota que en tu elemento <code>style</code> 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 <code>style</code>, intenta eliminar la declaración de estilo de <code>h2</code> de tus elementos de estilo existentes y reemplazala por la declaración de clase <code>.red-text</code>.",
        "Crea una clase CSS llamada <code>red-text</code> y aplicala a tu elemento <code>h2</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten",
      "descriptionDe": [
        "Erstelle eine CSS Klasse namens \"red-text\" und füge sie zu deinem <code>h2</code> Element hinzu.",
        "Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.",
        "So sieht eine CSS Klasse aus:",
        "<img class=\"img-responsive\" alt=\"Ein Beispiel, wie Styles geschrieben werden. Das wird im Detail in den folgenden Zeilen beschrieben.\" src=\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\">",
        "Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <code>&#60;style&#62;</code> geschrieben haben.",
        "Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;/h2&#62;</code>",
        "Beachte, dass Klassen in deinem CSS <code>style</code> Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.",
        "Anstatt ein neues <code>style</code> Element zu erstellen, versuche die <code>h2</code> Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen."
      ]
    },
    {
      "id": "bad87fee1348bd9aefe08806",
      "title": "Style Multiple Elements with a CSS Class",
      "description": [
        "Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
        "Remember that CSS class selectors require a period at the beginning like this:",
        "<code>.blue-text {</code>",
        "<code>&nbsp;&nbsp;color: blue;</code>",
        "<code>}</code>",
        "But also remember that class declarations don't use a period, like this:",
        "<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>",
        "Apply the <code>red-text</code> class to your <code>h2</code> and <code>p</code> elements."
      ],
      "tests": [
        "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');",
        "assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.');",
        "assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>p</code> element should be red.');",
        "assert($(\"p\").hasClass(\"red-text\"), 'message: Your <code>p</code> element should have the class <code>red-text</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Da estilo a múltiples elementos con una clase CSS",
      "descriptionEs": [
        "Recuerda que puedes adjuntar clases a elementos HTML utilizando <code>class=\"tu-clase-aqui\"</code> dentro de la etiqueta de apertura del elemento mismo.",
        "Recuerda que los selectores de clase CSS requieren un punto al principio, así:",
        "<code>.blue-text {</code>",
        "<code>&nbsp;&nbsp;color: blue;</code>",
        "<code>}</code>",
        "Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:",
        "<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>",
        "Aplica la clase <code>red-text</code> a tus elementos <code>h2</code> y <code>p</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse",
      "descriptionDe": [
        "Füge den <code>h2</code> und <code>p</code> Elementen die Klasse \"red-text\" hinzu.",
        "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel <code>class=\"deine-klasse\"</code> innerhalb des öffnenden Tags schreibst.",
        "Du weißt, es gehört ein Punkt vor CSS Klassen: <code>.red-text { color: blue; }</code>. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08806",
      "title": "Change the Font Size of an Element",
      "description": [
        "Font size is controlled by the <code>font-size</code> CSS property, like this:",
         "<code>h1 {</code>",
        "<code>&nbsp;&nbsp;font-size: 30px;</code>",
        "<code>}</code>",
        "Create a second <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
        "Inside the same <code>&#60;style&#62;</code> tag that we created for your <code>red-text</code> class, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels (<code>16px</code>)."
      ],
      "tests": [
        "assert($(\"p\").length > 1, 'message: You need 2 <code>p</code> elements with Kitty Ipsum text.');",
        "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
        "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.');",
        "assert($(\"p:eq(0)\").css(\"font-size\") === \"16px\" && $(\"p:eq(1)\").css(\"font-size\") === \"16px\", 'message: Give elements with the <code>p</code> tag a <code>font-size</code> of <code>16px</code>.')"
      ],
      "challengeSeed": [
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p class=\"red-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.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Cambia el tamaño de fuente de un elemento.",
      "descriptionEs": [
        "El tamaño de fuente es controlado por la propiedad CSS \"font-size\", como aquí:",
      "<code>h1 {</code>",
      "<code>&nbsp;&nbsp;font-size: 30px;</code>",
      "<code>}</code>",
        "Crea un segundo elemento <code>p</code> con el siguiente texto kitty ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
        "Dentro de la misma etiqueta <code>&#60;style&#62;</code> que creamos para tu clase <code>red-text</code>, pon el <code>font-size</code> de los elementos <code>p</code> a 16 pixeles (<code>16px</code>)."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Ändere die Schriftgröße eines Elements",
      "descriptionDe": [
        "Erstelle ein zweites <code>p</code> Element. Ändere dann innerhalb deines <code>&#60;style&#62;</code> Elements die Schriftgröße oder \"font-size\" von allen <code>p</code> Elementen auf 16 Pixel.",
        "Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: <code>h1 { font-size: 30px; }</code>",
        "Zuerst erstellst du ein zweites <code>p</code> Element mit dem folgenden Kitty Ipsum Text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
        "Versuche nun beiden <code>p</code> Elementen die Schriftgröße von 16 Pixeln (<code>16px</code>) zu geben. Du kannst das innerhalb des selben <code>&#60;style&#62;</code> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben."
      ]
    },
    {
      "id": "bad87fee1348bd9aede08807",
      "title": "Set the Font Family of an Element",
      "description": [
        "You can set an element's font by using the <code>font-family</code> property.",
        "For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS:",
        "<code>h2 {</code>",
        "<code>&nbsp;&nbsp;font-family: Sans-serif;</code>",
        "<code>}</code>",
        "Make all of your <code>p</code> elements use the <code>Monospace</code> font."
      ],
      "tests": [
        "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> elements should use the font <code>Monospace</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p class=\"red-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.</p>",
        "<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Establecer la familia del tipo de letra de un elemento",
      "descriptionEs": [
        "Puedes establecer el tipo de letra de un elemento usando la propiedad <code>font-family</code>.",
        "Por ejemplo, si quiere establecer el tipo de letra de su elemento <code>h2</code> como <code>Sans-serif</code>, use el siguiente CSS:",
        "<code>h2 {</code>",
        "<code>&nbsp;&nbsp;font-family: Sans-serif;</code>",
        "<code>}</code>",
        "Haga que todos sus elementos <code>p</code> utilicen el tipo de letra <code>Monospace</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Definiere die Schriftart eines Elements",
      "descriptionDe": [
        "Definiere für alle <code>p</code> Elemente die Schriftart \"Monospace\".",
        "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.",
        "Wenn du zum Beispiel deinem <code>h2</code> Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: <code>h2 { font-family: Sans-serif; }</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08807",
      "title": "Import a Google Font",
      "description": [
        "Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
        "First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
        "Copy the following code snippet and paste it into the top of your code editor:",
        "<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
        "Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element.",
        "Apply the <code>font-family</code> of <code>Lobster</code> to your <code>h2</code> element."
      ],
      "tests": [
        "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'message: Import the <code>Lobster</code> font.');",
        "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your <code>h2</code> element should use the font <code>Lobster</code>.');",
        "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> element should still use the font <code>Monospace</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Importar un tipo de letra de Google",
      "descriptionEs": [
        "Ahora, importemos y apliquemos un tipo de letra de Google (tenga en cuenta que si Google es bloqueado en su país, debera saltarse este desafio).",
        "Primero, haga un <code>llamado</code> a Google para tomar el tipo de letra <code>Lobster</code> y para cargarlo en su HTML.",
        "Copie la siguiente porción de código y péguela en la parte superior de su editor de texto:",
        "<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
        "Ahora establezca <code>Lobster</code> como valor de font-family en su elemento <code>h2</code>.",
        "Aplique la familia de fuente (<code>font-family</code>) <code>Lobster</code> a su elemento <code>h2</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Importiere eine Google Font",
      "descriptionDe": [
        "Füge dem <code>h2</code> Element die Schriftart oder <code>font-family</code> \"Lobster\" hinzu.",
        "Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.",
        "Kopiere den folgenden Code und füge diesen in deinen Editor über dem <code>style</code> Element ein:",
        "<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
        "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem <code>h2</code> Element hinzufügen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08808",
      "title": "Specify How Fonts Should Degrade",
      "description": [
        "There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
        "When one font isn't available, you can tell the browser to \"degrade\" to another font.",
        "For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
        "<code>p {</code>",
        "<code>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;</code>",
        "<code>}</code>",
        "Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
      ],
      "tests": [
        "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'message: Your h2 element should use the font <code>Lobster</code>.');",
        "assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'message: Your h2 element should degrade to the font <code>Monospace</code> when <code>Lobster</code> is not available.');",
        "assert(new RegExp(\"<!--\", \"gi\").test(code), 'message: Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.');",
        "assert(new RegExp(\"-->\", \"gi\").test(code), 'message: Be sure to close your comment by adding <code>--&#62;</code>.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Especifique como deben degradarse los tipos de letra",
      "descriptionEs": [
        "Hay diversos tipos de letra disponibles por omisión en todos los navegadores.  Estos incluyend <code>Monospace</code>, <code>Serif</code> y <code>Sans-Serif</code>",
		"Cuando un tipo de letra no está disponible, puede decirle al navegador que \"degrade\" a otro tipo de letra.",
		"Por ejemplo, si quiere que un elemento use el tipo <code>Helvetica</code>, o que se degrade a <code>Sans-Serif</code> cuando <code>Helvetica</code> no esté disponible, puede usar el siguiente estilo CSS:",
        "<code>p {</code>",
        "<code>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;</code>",
        "<code>}</code>",
        "Ahora ponga como comentarios sus llamadas a tipos de letra de Google, de forma que el tipo <code>Lobster</code> no esté disponible. Note como se degrada al tipo <code>Monospace</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten",
      "descriptionDe": [
        "Füge allen <code>h2</code> Elementen die Schriftart \"Lobster\" hinzu und definiere \"Monospace\" als Ersatzschrift, wenn \"Lobster\" nicht verfügbar ist.",
        "Du kannst \"Lobster\" als Schriftart deines <code>h2</code> Elements belassen, aber gleichzeitig dafür sorgen, dass eine alternative Schrift geladen wird, wenn \"Lobster\" nicht zur Verfügung steht.",
        "Wenn du zum Beispiel einem Element die Schriftart \"Helvetica\" geben möchtest, aber gleichzeitig die alternative Schrift \"Sans-Serif\" laden willst, wenn \"Helvetica\" nicht verfügbar ist, kannst du diesen CSS Style verwenden: <code>p { font-family: Helvetica, Sans-Serif; }</code>",
        "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem <code>h2</code> Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.",
        "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08812",
      "title": "Add Images to your Website",
      "description": [
        "You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
        "An example of this would be:",
        "<code>&#60img src=\"http://www.your-image-source.com/your-image.jpg\"&#62</code>",
        "Note that in most cases, <code>img</code> elements are self-closing.",
        "Try it with this image:",
        "<code>https://bit.ly/fcc-relaxing-cat</code>"
      ],
      "tests": [
        "assert($(\"img\").length > 0, 'message: Your page should have an image element.');",
        "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Añade imágenes a tu sitio web",
      "descriptionEs": [
        "Puedes agregar imágenes a tu sitio web mediante el uso del elemento <code>img</code>, y apuntar a la URL específica de una imagen utilizando el atributo <code>src</code>.",
        "Un ejemplo de esto sería:",
        "<code><img src=\"http://www.your-image-source.com/your-image.jpg\"></code>",
        "Ten en cuenta que en la mayoría de los casos, los elementos <code>img</code> son de cierre automático.",
        "Prueba con esta imagen:",
        "<code>https://bit.ly/fcc-relaxing-cat</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu",
      "descriptionDe": [
        "Nutze ein <code>img</code> Element um das Bild <code>https://bit.ly/fcc-relaxing-cat</code> einzufügen.",
        "Du kannst <code>img</code> Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das <code>src</code> Attribut.",
        "Ein Beispiel dafür wäre <code>&#60img src=\"www.bild-quelle.com/bild.jpg\"/&#62</code>. Beachte, dass <code>img</code> Elemente in den meisten Fällen selbstschließend sind.",
        "Versuche es mit diesem Bild: <code>https://bit.ly/fcc-relaxing-cat</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9acdf08812",
      "title": "Size your Images",
      "description": [
        "CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
        "For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
        "<code>&#60;style&#62;</code>",
        "<code>&nbsp;&nbsp;.larger-image {</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;</code>",
        "<code>&nbsp;&nbsp;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
      ],
      "tests": [
        "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
        "assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<img src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Da tamaño a tus imágenes",
      "descriptionEs": [
        "CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con los tipos de letra, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. ",
        "Por ejemplo, si queremos crear una clase CSS llamada <code>larger-image</code> que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:",
        "<code>&#60;estilo&#62;</code>",
        "<code>&nbsp;&nbsp;.larger-image{</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;</code>",
        "<code>&nbsp;&nbsp;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Crea una clase llamada <code>smaller-image</code> y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Skaliere deine Bilder",
      "descriptionDe": [
        "Erstelle eine Klasse mit dem Namen <code>smaller-image</code> und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
        "Die Breite eines Elements wird mit dem CSS Attribut <code>width</code> kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.",
        "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <code>&#60;style&#62; .larger-image { width: 500px; } &#60;/style&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9bedf08813",
      "title": "Add Borders Around your Elements",
      "description": [
        "CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
        "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
        "<code>&#60;style&#62;</code>",
        "<code>&nbsp;&nbsp;.thin-red-border {</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
        "<code>&nbsp;&nbsp;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
        "Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
         "<code>&lt;img class=\"class1 class2\"&gt;</code>"
      ],
      "tests": [
        "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
        "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your <code>img</code> element should have the class <code>thick-green-border</code>.');",
        "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of <code>10px</code>.');",
        "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of <code>solid</code>.');",
        "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your <code>img</code> element should be green.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Añade bordes alrededor de tus elementos",
      "descriptionEs": [
        "Los bordes CSS tienen propiedades como <code>style</code>, <code>color</code> y <code>width</code>",
        "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:",
        "<code>&#60;style&#62;</code>",
        "<code>&nbsp;&nbsp;.thin-red-border {</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
        "<code>&nbsp;&nbsp;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo de <code>solid</code> en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ",
        "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo <code>class</code>. Por ejemplo:",
        "<code>&lt;img class=\"class1 class2\"&gt;</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu",
      "descriptionDe": [
        "Erstelle die Klasse \"thick-green-border\", welche einen 10 Pixel dicken, grünen Rahmen mit dem Style \"solid\" um ein HTML Element setzt. Füge diese Klasse zu deinem Katzenfoto hinzu.",
        "CSS Rahmen haben Attribute wie Style, Color und Width.",
        "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08814",
      "title": "Add Rounded Corners with a Border Radius",
      "description": [
        "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
        "You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this property to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
        "Give your cat photo a <code>border-radius</code> of <code>10px</code>."
      ],
      "tests": [
        "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');",
        "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of <code>10px</code>');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Añade bordes alrededor de tus elementos",
      "descriptionEs": [
        "Los bordes CSS tienen propiedades como <code>style</code>, <code>color</code> y <code>width</code>",
        "Por ejemplo, si queremos crear un borde de 5 píxeles rojo alrededor de un elemento HTML, podríamos utilizar esta clase:",
        "<code>&#60;style&#62;</code>",
        "<code>&nbsp;&nbsp;.thin-red-border {</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
        "<code>&nbsp;&nbsp;}</code>",
        "<code>&#60;/style&#62;</code>",
        "Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo de <code>solid</code> en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ",
        "Recuerda que puedes aplicar múltiples clases a un elemento separando una clase de otra con un espacio. Haces esto dentro de tu atributo <code>class</code>. Por ejemplo:",
        "<code>&lt;img class=\"class1 class2\"&gt;</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu",
      "descriptionDe": [
        "Gib deinem Katzenbild einen <code>border-radius</code> von 10 Pixeln.",
        "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut <code>border-radius</code> abrunden.",
        "Du kannst einen <code>border-radius</code> mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner <code>thick-green-border</code> Klasse hinzu und setze es auf 10 Pixel."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08815",
      "title": "Make Circular Images with a Border Radius",
      "description": [
        "In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
        "Give your cat photo a <code>border-radius</code> of <code>50%</code>."
      ],
      "tests": [
        "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of <code>50&#37;</code>&#44; making it perfectly circular.');",
        "assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 10px;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Añade esquinas redondeadas con un radio de borde",
      "descriptionEs": [
        "Tu foto del gato actualmente tiene esquinas cuadradas. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>. ",
        "Puedes especificar un <code>border-radius</code> en píxeles. Esto afectará lo redondeadas de las esquinas. Añade esta propiedad a tu clase <code>thick-green-border</code> y establecela a <code>10px</code>. ",
        "Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius",
      "descriptionDe": [
        "Gib deinem Katzenfoto einen <code>border-radius</code> von 50 %.",
        "Du kannst einem <code>border-radius</code> neben Pixeln auch Prozentwerte zuweisen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08816",
      "title": "Link to External Pages with Anchor Elements",
      "description": [
        "<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
        "Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
        "<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
        "Here's an example:",
         "<code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
        "Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
      ],
      "tests": [
        "assert((/cat photos/gi).test($(\"a\").text()), 'message: Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".');",
        "assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp.com</code>');",
        "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure your <code>a</code> element has a closing tag.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Enlaza páginas externas con elementos ancla",
      "descriptionEs": [
        "Los elementos <code>a</code>, también conocido como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
        "Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
        "<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haga clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de anclaje se componen con el mismo texto, como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a> ",
        "He aquí un ejemplo:",
        "<code>&#60;p&#62;Aquí está un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo siga.&#60;/p&#62;</code>",
        "Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de anclaje</code> \" fotos de gatos\"."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
      "descriptionDe": [
        "Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.",
        "So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
        "<img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
        "Hier ist ein Beispiel: <code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aede08817",
      "title": "Nest an Anchor Element within a Paragraph",
      "description": [
        "Again, here's a diagram of an <code>a</code> element for your reference:",
        "<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
        "Here's an example:",
         "<code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
        "<code>Nesting</code> just means putting one element inside of another element.",
        "Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>h2</code> element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
      ],
      "tests": [
        "assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0, 'message: You need an <code>a</code> element that links to \"http://www.freecatphotoapp.com\".');",
        "assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your <code>a</code> element should have the anchor text of \"cat photos\"');",
        "assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element.');",
        "assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\"), 'message: Your <code>a</code> element should be nested within your new <code>p</code> element.');",
        "assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/^\\s*View\\smore\\s/gi), 'message: Your <code>p</code> element should have the text \"View more \" (with a space after it).');",
        "assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your <code>a</code> element should <em>not</em> have the text \"View more\".');",
        "assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
        "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<a href=\"http://www.freecatphotoapp.com\">cat photos</a>",
        "",
        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Anida un elemento de anclaje dentro de un párrafo",
      "descriptionEs": [
        "Una vez más, aquí está un diagrama de un elemento <code>a</code> para tu referencia:",
        "<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
        "He aquí un ejemplo:",
        "<code>&#60;p&#62;Aquí un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
        "<code>anidamiento</code> significa poner un elemento dentro de otro elemento.",
        "Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> para que el párrafo que lo rodee diga \"View more cat photos\", pero donde sólo \"cat photos\" sea un enlace, y el resto sea texto plano ."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen",
      "descriptionDe":[
        "Jetzt umschließe dein <code>a</code> Element mit einem <code>p</code> Element und dem Text \"click here for cat photos\". Nur \"cat photos\" soll ein Link ein – der Rest normaler Text.",
        "Hier ist nochmal ein Beispiel für ein <code>a</code> Element: <img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
        "So könnte es aussehen: <code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08817",
      "title": "Make Dead Links using the Hash Symbol",
      "description": [
        "Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
        "This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
        "Replace the value of your <code>a</code> element's <code>href</code> attribute with a <code>#</code>, also known as a hash symbol, to turn it into a dead link."
      ],
      "tests": [
        "assert($(\"a\").attr(\"href\") === \"#\", 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"http://www.freecatphotoapp.com\">cat photos</a>.</p>",
        "",
        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Haz vínculos muertos utilizando el símbolo de numero",
      "descriptionEs": [
        "A veces quieres agregar elementos <code>a</code> a tu sitio web antes de saber qué enlazarán.",
        "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando <code>jQuery</code>, que aprenderemos más adelante.",
        "Reemplaza el atributo <code>href</code> de tu elemento <code>a</code> con un <code>#</code>, también conocido como un símbolo de número o de <em>hash</em>, para convertirlo en un vínculo muerto."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol",
      "descriptionDe": [
        "Nutze das Hash Symbol (#) um deine <code>a</code> Elemente zu toten Links zu machen.",
        "Manchmal wirst du <code>a</code> Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.",
        "Das ist auch nützlich, wenn du die Funktion eines Links mit <code>jQuery</code> verändern willst. Das werden wir noch behandeln.",
        "Ersetze den Inhalt des <code>href</code> Attributs deines <code>a</code> Elements mit einem Hash Symbol um einen toten Link zu erzeugen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08820",
      "title": "Turn an Image into a Link",
      "description": [
        "You can make elements into links by nesting them within an <code>a</code> element.",
        "Nest your image within an <code>a</code> element. Here's an example:",
         "<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
        "Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
        "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
      ],
      "tests": [
        "assert($(\"a\").children(\"img.smaller-image\").length > 0, 'message: Nest the existing <code>img</code> element within an <code>a</code> element.');",
        "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');",
        "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Convierte una imagen en un vínculo",
      "descriptionEs": [
        "Puedes convertir elementos en enlaces al anidarlos con un elemento <code>a</code>.",
        "Anida tu imagen dentro de un elemento <code>a</code>. He aquí un ejemplo: ",
        "<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
        "Recuerda usar <code>#</code> como atributo <code>href</code> de tu elmento <code>a</code> con el fin de convertirlo en un vínculo muerto.",
        "Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Verlinke ein Bild",
      "descriptionDe": [
        "Umschließe dein <code>img</code> Element mit einem <code>a</code> Element als toten Link.",
        "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
        "Umschließe nun dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel: <code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
        "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des <code>href</code> Attributs des <code>a</code> Elements nutzt, um daraus einen toten Link zu machen.",
        "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08818",
      "title": "Add Alt Text to an Image for Accessibility",
      "description": [
        "<code>alt</code> attributes, also known as <code>alt text</code>, are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
        "In short, every image should have an <code>alt</code> attribute!",
        "You can add an <code>alt</code> attribute right in the img element like this:",
         "<code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"&#62</code>",
        "Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
      ],
      "tests": [
        "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have an <code>alt</code> attribute set to <code>A cute orange cat lying on its back</code>');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Agrega texto alternativo a una imagen para dar Accesibilidad",
      "descriptionEs": [
        "Los atributos <code>alt</code> también conocidos como <code>texto alternativo</code>, son lo que se presentarán en caso que el navegador no puede mostrar la imagen. Los atributos <code>alt</code> también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Y los motores de búsqueda también examinan los atributos <code>alt</code>. ",
        "En resumen, ¡cada imagen debe tener un atributo <code>alt</code>!",
        "Usted puede agregar un atributo <code>alt</code> justo en el elemento <code>img</code> así:",
        "<code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"tu texto alternativo\"&#62</code>",
        "Añade un atributo <code>alt</code> con el texto <code>A cute orange cat lying on its back</code> a nuestra foto del gato."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu",
      "descriptionDe": [
        "Füge zu unserem Katzen-Bild ein <code>alt</code> Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu.",
        "<code>alt</code> Attribute – auch \"Alt Text\" genannt – werden vom Browser angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.",
        "Kurz gesagt: Jedes Bild sollte ein <code>alt</code> Attribut beinhalten!",
        "<code>alt</code> Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.",
        "Du kannst das <code>alt</code> Attribut direkt in das Img Element einfügen: <code>&#60img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/&#62</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08827",
      "title": "Create a Bulleted Unordered List",
      "description": [
        "HTML has a special element for creating <code>unordered lists</code>, or bullet point-style lists.",
        "Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
        "For example: ",
        "<code>&#60;ul&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;milk&#60;/li&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;cheese&#60;/li&#62;</code>",
        "<code>&#60;/ul&#62;</code>",
        "would create a bullet point-style list of \"milk\" and \"cheese\".",
        "Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
      ],
      "tests": [
        "assert($(\"ul\").length > 0, 'message: Create a <code>ul</code> element.');",
        "assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
        "assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
        "assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'message: Make sure your <code>li</code> elements have closing tags.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p class=\"red-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.</p>",
        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Crea una lista no ordenada con viñetas",
      "descriptionEs": [
        "HTML tiene un elemento especial para la creación de <code>listas no ordenadas</code>, o listas con estilo viñeta.",
        "Las listas no ordenadas comienzan con un elemento <code>&#60;ul&#62;</code>. A continuación contienen una cantidad de elementos <code>&#60;li&#62;.</code>",
        "Por ejemplo: ",
        "<code>&#60;ul&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;leche&#60;/li&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;queso&#60;/li&#62;</code>",
        "<code>&#60;/ul&#62;</code>",
        "creará una lista con viñetas con \"leche\" y \"queso\".",
        "Elimina los dos últimos elementos <code>p</code> y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle eine ungeordnete Liste",
      "descriptionDe": [
        "Ersetze deine <code>p</code> Elemente mit drei Dingen, die Katzen lieben – in einer ungeordneten Liste.",
        "HTML hat ein spezielles Element zum Erstellen von ungeordneten Listen.",
        "ungeordnete Listen starten mit einem <code>&#60;ul&#62;</code> Element. Dann beinhalten sie eine gewisse Anzahl an <code>&#60;li&#62;</code> Elementen.",
        "Als Beispiel: <code>&#60;ul&#62;&#60;li&#62;Milch&#60;/li&#62;&#60;li&#62;Käse&#60;/li&#62;&#60;/ul&#62;</code> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08828",
      "title": "Create an Ordered List",
      "description": [
        "HTML has a special element for creating <code>ordered lists</code>, or numbered-style lists.",
        "Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
        "For example:",
        "<code>&#60;ol&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
        "<code>&#60;/ol&#62;</code>",
        "would create a numbered list of \"Garfield\" and \"Sylvester\".",
        "Create an ordered list of the top 3 things cats hate the most."
      ],
      "tests": [
        "assert($(\"ul\").length > 0, 'message: You should have an <code>ul</code> element on your page.');",
        "assert($(\"ol\").length > 0, 'message: You should have an <code>ol</code> element on your page.');",
        "assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
        "assert($(\"ol li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ol</code> element.');",
        "assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
        "assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'message: Make sure your <code>ol</code> element has a closing tag.');",
        "assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'message: Make sure your <code>li</code> element has a closing tag.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Crear una lista ordenada",
      "descriptionEs": [
        "HTML tiene un elemento especial para la creación de <code>listas ordenadas</code>, o listas de estilo numerado.",
        "Las listas ordenadas comienzan con un elemento <code>&#60;ol&#62;</code>. Luego contienen un número de elementos <code>&#60;li&#62;.</code>",
        "Por ejemplo:",
        "<code>&#60;ol&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
        "&nbsp;&nbsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
        "<code>&#60;/ol&#62;</code>",
        "creará una lista numerada con \"Garfield\" y \"Sylvester\".",
        "Crea una lista ordenada de los 3 cosas que más odian los gatos."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle eine geordnete Liste",
      "descriptionDe": [
        "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen.",
        "HTML beinhaltet ein spezielles Element für geordnete Listen.",
        "Geordnete Listen starten mit einem <code>&#60;ol&#62;</code> Element. Dann enthalten sie eine gewisse Anzahl an <code>&#60;li&#62;</code> Elementen.",
        "Als beispiel: <code>&#60;ol&#62;&#60;li&#62;hydrogen&#60;/li&#62;&#60;li&#62;Helium&#60;/li&#62;&#60;/ol&#62;</code> würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08829",
      "title": "Create a Text Field",
      "description": [
        "Now let's create a web form.",
        "Text inputs are a convenient way to get input from your user.",
        "You can create one like this:",
         "<code>&#60;input type=\"text\"&#62;</code>",
        "Note that <code>input</code> elements are self-closing.",
        "Create an <code>input</code> element of type <code>text</code> below your lists."
      ],
      "tests": [
        "assert($(\"input[type=text]\").length > 0, 'message: Your app should have an <code>input</code> element of type <code>text</code>.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Crea un campo de texto",
      "descriptionEs": [
        "Ahora vamos a crear un formulario web.",
        "Los campos de texto son una manera conveniente de obtener retroalimentación de su usuario.",
        "Usted puede crear uno como este:",
        "<code>&#60;input type=\"text\"&#62;</code>",
        "Tenga en cuenta que los elementos <code>input</code> son de cierre automático.",
        "Crea un elemento <code>input</code> de tipo <code>texto</code> debajo de tus listas."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle ein Textfeld",
      "descriptionDe": [
        "Nun erstellen wir ein Web Formular. Erstelle ein Textfeld unter deinen Listen.",
        "Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.",
        "So kannst du eines erstellen: <code>&#60;input type=\"text\"&#62;</code>. Beachte, dass <code>input</code> Elemente selbstschließend sind."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08830",
      "title": "Add Placeholder Text to a Text Field",
      "description": [
        "Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
        "You can create placeholder text like so:",
         "<code>&#60;input type=\"text\" placeholder=\"this is placeholder text\"&#62;</code>",
        "Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
      ],
      "tests": [
        "assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute text <code>input</code> element.');",
        "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "<input type=\"text\">"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Agrega un texto de relleno a un campo de texto",
      "descriptionEs": [
        "Tu texto de relleno es el que aparece campo de texto antes de que tu usuario haya ingresado datos.",
        "Puedes crear un texto de relleno de esta manera:",
        "<code>&#60;input type=\"text\" placeholder=\"este es un texto de relleno\"&#62;</code>",
        "Establece el valor del <code>texto de relleno</code> de tu campo de texto como \"cat photo URL\"."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu",
      "descriptionDe": [
        "Setze bei deinem <code>input</code> Element den Wert für <code>placeholder</code> auf \"cat photo URL\".",
        "Platzhalter erscheinen in <code>input</code> Feldern, bevor der Nutzer etwas eingibt.",
        "Du kannst Platzhalter auf folgende Weise erstellen: <code>&#60;input type=\"text\" placeholder=\"Das ist ein Platzhalter.\"&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aede08830",
      "title": "Create a Form Element",
      "description": [
        "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
        "For example:",
         "<code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>",
        "Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
      ],
      "tests": [
        "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a <code>form</code> element.');",
        "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');",
        "assert(code.match(/<\\/form>/g) && code.match(/<form/g) && code.match(/<\\/form>/g).length === code.match(/<form/g).length, 'message: Make sure your <code>form</code> element has a closing tag.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "<input type=\"text\" placeholder=\"cat photo URL\">"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Crea un elemento de formulario",
      "descriptionEs": [
        "Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento <code>form</code>.",
        "Por ejemplo:",
        "<code>&#60;form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"&#62;&#60;/form&#62;</code>",
        "Anida tu campo de texto en un elemento <code>form</code>. Agrega el atributo <code>action=\"/submit-cat-photo\"</code> a este elemento de formulario."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle ein Formular",
      "descriptionDe": [
        "Umschließe dein Textfeld mit einem <code>form</code> Element. Füge anschließend das Attribut <code>action=\"/submit-cat-photo\"</code> hinzu.",
        "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein <code>form</code> Element bestimmst.",
        "Zum Beispiel: <code>&#60;form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"&#62;&#60;/form&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedd08830",
      "title": "Add a Submit Button to a Form",
      "description": [
        "Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
        "Here's an example submit button:",
        "<code>&#60;button type=\"submit\"&#62;this button submits the form&#60;/button&#62;</code>",
        "Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
      ],
      "tests": [
        "assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');",
        "assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');",
        "assert($(\"button\").text().match(/submit/gi), 'message: Your submit button should have the text \"submit\".');",
        "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure your <code>button</code> element has a closing tag.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "<form action=\"/submit-cat-photo\">",
        "  <input type=\"text\" placeholder=\"cat photo URL\">",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Agrega un botón Enviar a un formulario",
      "descriptionEs": [
        "Añadamos un elemento <code>submit</code> a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo <code>action</code> de tu formulario. ",
        "He aquí un ejemplo de un botón de envío:",
        "<code>&#60;button type=\" submit\"&#62;este botón envía el formulario&#60;/botón&#62;</code>",
        "Agrega un botón de enviar a tu elemento <code>form</code> con el tipo <code>submit</code> y con el texto \"Submit\"."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Füge eine Schaltfläche zum Senden hinzu",
      "descriptionDe": [
        "Füge eine Schaltfläche zum Senden mit dem Typ \"submit\" und \"Submit\" als Text zu deinem <code>form</code> Element hinzu.",
        "Lass uns nun eine Schaltfläche zum Senden zu deinem Formlar hinzufügen. Durch einen Klick auf diese Schaltfläche werden die Daten des Formulars an die URL gesendet, welche du in dem <code>action</code> Attribut deines Formulars angegeben hast.",
        "Hier ist ein Beispiel einer solchen Schaltfläche: <code>&#60;button type=\"submit\"&#62;Diese Schaltfläche überträgt die Daten des Formulars.&#60;/button&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedc08830",
      "title": "Use HTML5 to Require a Field",
      "description": [
        "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
        "For example, if you wanted to make a text input field required, you can just add the word <code>required</code> within your <code>input</code> element, you would use: <code>&#60;input type=\"text\" required&#62;</code>",
        "Make your text <code>input</code> a <code>required</code> field, so that your user can't submit the form without completing this field.",
        "Then try to submit the form without inputing any text. See how your HTML5 form notifies you that the field is required?",
        "Note: This field does not work in Safari."
      ],
      "tests": [
        "assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "<form action=\"/submit-cat-photo\">",
        "  <input type=\"text\" placeholder=\"cat photo URL\">",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Utiliza HTML5 para especificar campos obligatorios",
      "descriptionEs": [
        "Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que él o ella lo haya llenado.",
        "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra <code>required</code> dentro de tu elemento <code>input</code>, usarías: <code>&#60;input type=\"text\" required&#62;</code> ",
        "Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.",
        "A continuación, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Nutze HTML5 um ein Pflichtfeld zu erstellen",
      "descriptionDe": [
        "Mache aus deinem <code>input</code> Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.",
        "Du kannst bestimmte Felder eines Formulars als Pflichtfelder deklarieren. Damit ist es deinen Nutzern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.",
        "Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines <code>input</code> Elements hinzufügen: <code>&#60;input type=\"text\" required&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08834",
      "title": "Create a Set of Radio Buttons",
      "description": [
        "You can use <code>radio buttons</code> for questions where you want the user to only give you one answer.",
        "Radio buttons are a type of <code>input</code>",
        "Each of your radio buttons should be nested within its own <code>label</code> element.",
        "All related radio buttons should have the same <code>name</code> attribute.",
        "Here's an example of a radio button:",
        "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
        "Add a pair of radio buttons to your form. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>."
      ],
      "tests": [
        "assert($('input[type=\"radio\"]').length > 1, 'message: Your page should have two radio button elements.');",
        "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'message: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');",
        "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'message: Each of your two radio button elements should be nested in its own <code>label</code> element.');",
        "assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
        "assert($(\"label\").text().match(/indoor/gi), 'message: One of your radio buttons should have the label <code>indoor</code>.');",
        "assert($(\"label\").text().match(/outdoor/gi), 'message: One of your radio buttons should have the label <code>outdoor</code>.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "<form action=\"/submit-cat-photo\">",
        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Crea un Conjunto de botones de radio",
      "descriptionEs": [
        "Puedes usar <code>botones de radio</code> para las preguntas en las que desea que el usuario sólo le de una de varias posibles respuestas.",
        "Los botones de radio son un tipo de <code>input</code>",
        "Cada uno de los botones de radio debe estar anidado dentro de su propio elemento <code>label</​​code>.",
        "Todos los botones de radio relacionados deben tener el mismo atributo <code>name</code>.",
        "He aquí un ejemplo de un botón de radio:",
        "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
        "Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de <code>indoor</code> y el otro debe tener la opción <code>outdoor</code>. "
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle ein paar Optionsfelder",
      "descriptionDe": [
        "Füge ein paar Optionsfelder zu deinem Formular hinzu. Jedes Optionsfeld sollte innerhalb seines eigenen <code>label</code> Elements liegen. Sie sollten außerdem ein <code>name</code> Attribut teilen. Eines davon sollte die Option \"indoor\" und das andere die Option \"outdoor\" haben.",
        "Du kannst Optionsfelder für Fragen verwenden, auf die der Nutzer nur eine Antwort geben soll.",
        "Optionsfelder sind lediglich ein weiterer Typ von <code>input</code> Elementen.",
        "Jedes deiner Optionsfelder sollte innerhalb des eigenen <code>label</code> Elements liegen.",
        "Alle Optionsfelder mit Bezug zueinander sollten das gleiche <code>name</code> Attribut teilen.",
        "Ein Beispiel eines Optionsfeldes: <code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08835",
      "title": "Create a Set of Checkboxes",
      "description": [
        "Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.",
        "Checkboxes are a type of <code>input</code>",
        "Each of your checkboxes should be nested within its own <code>label</code> element.",
        "All related checkbox inputs should have the same <code>name</code> attribute.",
        "Here's an example of a checkbox:",
        "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</code>",
        "Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
      ],
      "tests": [
        "assert($('input[type=\"checkbox\"]').length > 2, 'message: Your page should have three checkbox elements.');",
        "assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'message: Each of your three checkbox elements should be nested in its own <code>label</code> element.');",
        "assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
        "assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'message: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "<form action=\"/submit-cat-photo\">",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Crea un conjunto de casillas de verificación",
      "descriptionEs": [
        "Los formularios suelen usar <code>casillas de verificación</code> para preguntas que pueden tener más de una respuesta.",
        "Las casillas de verificación son un tipo de <code>entrada</code>",
        "Cada una de tus casillas de verificación deben ser anidado dentro de su propio <code>etiqueta</code>.",
        "Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo <code>name</code>.",
        "He aquí un ejemplo de una casilla de verificación:",
        "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Cariñoso&#60;/label&#62;</code>",
        "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben compartir el atributo <code>nombre</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Erstelle ein paar Kontrollkästchen",
      "descriptionDe": [
        "Füge deinem Formular drei Kontrollkästchen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen <code>label</code> Elements stehen. Alle sollten das gleiche <code>name</code> Attribut \"personality\" teilen.",
        "Formulare nutzen Kontrollkästchen meistens für Fragen, die mehrerer Antworten bedürfen.",
        "Als Beispiel: <code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; liebevoll&#60;/label&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aedd08835",
      "title": "Check Radio Buttons and Checkboxes by Default",
      "description": [
        "You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
        "To do this, just add the word \"checked\" to the inside of an input element. For example:",
        "<code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>",
        "Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
      ],
      "tests": [
        "assert($('input[type=\"radio\"]').prop(\"checked\"), 'message: Your first radio button on your form should be checked by default.');",
        "assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'message: Your first checkbox on your form should be checked by default.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "<form action=\"/submit-cat-photo\">",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Marca botones de radio y casillas de verificación por omisión",
      "descriptionEs": [
        "Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
        "Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento de entrada. Por ejemplo:",
        "<code>&#60;input type=\"radio\" name=\"nombre-de-prueba\" checked&#62;</code>",
        "Establece como marcados por omisión el primero de tus <code>botones de radio</code> y la primera <code>casilla de verificación</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Standardmäßig ausgewählte Optionsfelder und Kontrollkästchen",
      "descriptionDe": [
        "Stelle sicher, dass jeweilse dein erstes Optionsfeld und Kontrollkästchen standardmäßig markiert sind.",
        "Das kannst du erreichen, indem beiden das Attribut <code>checked</code> beigefügt wird.",
        "Um das zu bewerkstelligen, füge einfach \"checked\" innerhalb eines Eingabefeldes hinzu. Als Beispiel: <code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>"
      ]
    },
    {
      "id": "bad87fee1348bd9aede08835",
      "title": "Nest Many Elements within a Single Div Element",
      "description": [
        "The <code>div</code> element, also known as a division element, is a general purpose container for other elements.",
        "The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
        "Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
        "Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
        "Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
      ],
      "tests": [
        "assert($(\"div\").children(\"p\").length > 1, 'message: Nest your <code>p</code> element inside your <code>div</code> element.');",
        "assert($(\"div\").children(\"ul\").length > 0, 'message: Nest your <code>ul</code> element inside your <code>div</code> element.');",
        "assert($(\"div\").children(\"ol\").length > 0, 'message: Nest your <code>ol</code> element inside your <code>div</code> element.');",
        "assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'message: Make sure your <code>div</code> element has a closing tag.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<p>Things cats love:</p>",
        "<ul>",
        "  <li>cat nip</li>",
        "  <li>laser pointers</li>",
        "  <li>lasagna</li>",
        "</ul>",
        "<p>Top 3 things cats hate:</p>",
        "<ol>",
        "  <li>flea treatment</li>",
        "  <li>thunder</li>",
        "  <li>other cats</li>",
        "</ol>",
        "",
        "<form action=\"/submit-cat-photo\">",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
        "  <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Anida muchos elementos dentro de una sólo elemento Div",
      "descriptionEs": [
        "El elemento <code>div</code>, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.",
        "El elemento <code>div</code> es probablemente el elemento HTML más utilizado. Es útil para pasar el CSS de sus propias declaraciones de clase a todos los elementos que contiene. ",
        "Al igual que cualquier otro elemento sin cierre automático, puede abrir una etiqueta <code>div</code> con <code>&#60;div&#62;</code> y cerrarla en otra línea con <code>&#60;/div&#62;</code> .",
        "Trata de poner tu etiqueta de apertura <code>div</code> por encima de elemento <code>p</code> \"Things cat love\", y tu etiqueta de cierre de <code>div</code> después de tu etiqueta de cierre de <code>ol</code>, para que cada una de tus listas estén dentro de un <code>div</code>. ",
        "Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento <code>div</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Umschließe viele Elemente mit einem einzigen Div Element",
      "descriptionDe": [
        "Umschließe deine \"Thins cats love\" und \"Things cats hate\" Listen mit einem <code>div</code> Element.",
        "Das <code>div</code> Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.",
        "Dieses Element wird von allen HTML Elementen wahrscheinlich am häufigsten verwendet. Es ist nützlich um die CSS Stile der eigenen Klasse an die enthaltenen Elemente zu vererben.",
        "Wie jedes andere Element – das sich nicht selbst schließt –  kannst du ein <code>div</code> Element mit <code>&#60;div&#62;</code> öffnen und mit <code>&#60;/div&#62;</code> wieder schließen.",
        "Versuche deine öffnende <code>div</code> Auszeichnung überhalb des <code>p</code> Elements von  \"Things cats love\" und das schließende <code>div</code> unterhalb der schließenden <code>ol</code> Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>"
      ]
    },
    {
      "id": "bad87fed1348bd9aede07836",
      "title": "Give a Background Color to a Div Element",
      "description": [
        "You can set an element's background color with the <code>background-color</code> property.",
        "For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:",
        "<code>.green-background {</code>",
        "<code>&nbsp;&nbsp;background-color: green;</code>",
        "<code>}</code>",
        "Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
      ],
      "tests": [
        "assert($(\"div\").hasClass(\"gray-background\"), 'message: Give your <code>div</code> element the class <code>gray-background</code>.');",
        "assert($(\".gray-background\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Your <code>div</code> element should have a gray background.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<div>",
        "  <p>Things cats love:</p>",
        "  <ul>",
        "    <li>cat nip</li>",
        "    <li>laser pointers</li>",
        "    <li>lasagna</li>",
        "  </ul>",
        "  <p>Top 3 things cats hate:</p>",
        "  <ol>",
        "    <li>flea treatment</li>",
        "    <li>thunder</li>",
        "    <li>other cats</li>",
        "  </ol>",
        "</div>",
        "",
        "<form action=\"/submit-cat-photo\">",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
        "  <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Da un color de fondo a un elemento Div",
      "descriptionEs": [
        "Puedes fijar el color de fondo de un elemento con la propiedad <code>background-color</code>.",
        "Por ejemplo, si quieres que el color de fondo de un elemento sea verde (<code>green</code>), ponlo en tu elemento <code>style</code>:",
        "<code>.green-background {</code>",
        "<code>&nbsp;&nbsp;background-color: green;</code>",
        "<code>}</code>",
        "Crea una clase llamada <code>gray-background</code> con la propiedad <code>background-color</code> en gris (<code>gray</code>). Asigna esta clase a tu elemento <code>div</code> ."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87eee1348bd9aede07836",
      "title": "Set the ID of an Element",
      "description": [
        "In addition to classes, each HTML element can also have an <code>id</code> attribute.",
        "There are several benefits to using <code>id</code> attributes, and you'll learn more about them once you start using jQuery.",
        "<code>id</code> attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same <code>id</code> attribute.",
        "Here's an example of how you give your <code>h2</code> element the id of <code>cat-photo-app</code>:",
        "<code>&#60;h2 id=\"cat-photo-app\"></code>",
        "Give your <code>form</code> element the id <code>cat-photo-form</code>."
      ],
      "tests": [
        "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "  .gray-background {",
        "    background-color: gray;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<div class=\"gray-background\">",
        "  <p>Things cats love:</p>",
        "  <ul>",
        "    <li>cat nip</li>",
        "    <li>laser pointers</li>",
        "    <li>lasagna</li>",
        "  </ul>",
        "  <p>Top 3 things cats hate:</p>",
        "  <ol>",
        "    <li>flea treatment</li>",
        "    <li>thunder</li>",
        "    <li>other cats</li>",
        "  </ol>",
        "</div>",
        "",
        "<form action=\"/submit-cat-photo\">",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
        "  <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Establecer el ID de un elemento",
      "descriptionEs": [
        "Además de las clases, cada elemento HTML también puede tener un atributo de identificación <code>id</code>.",
        "Hay varias ventajas al usar atributos <code>id</code>, y aprenderás más sobre estas cuando comiences a usar jQuery.",
        "Los atributos <code>id</code> deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le dé a más de un elemento un mismo atributo <code>id</code>. ",
        "He aquí un ejemplo de cómo le das la identificación <code>cat-photo-app</code> a tu elemento <code>h2</code>:",
        "<code>&#60;h2 id=\"cat-photo-app\"></code>",
        "Dale a tu elemento <code>form</code> la id <code>cat-photo-form</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87dee1348bd9aede07836",
      "title": "Use an ID Attribute to Style an Element",
      "description": [
        "One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
        "Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:",
        "<code>#cat-photo-element {</code>",
        "<code>&nbsp;&nbsp;background-color: green;</code>",
        "<code>}</code>",
        "Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.",
        "Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
      ],
      "tests": [
        "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.');",
        "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'message: Your <code>form</code> element should have the <code>background-color</code> of green.');",
        "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'message: Make sure your <code>form</code> element has an <code>id</code> attribute.');",
        "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'message: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
      ],
      "challengeSeed": [
        "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
        "<style>",
        "  .red-text {",
        "    color: red;",
        "  }",
        "",
        "  h2 {",
        "    font-family: Lobster, Monospace;",
        "  }",
        "",
        "  p {",
        "    font-size: 16px;",
        "    font-family: Monospace;",
        "  }",
        "",
        "  .thick-green-border {",
        "    border-color: green;",
        "    border-width: 10px;",
        "    border-style: solid;",
        "    border-radius: 50%;",
        "  }",
        "",
        "  .smaller-image {",
        "    width: 100px;",
        "  }",
        "",
        "  .gray-background {",
        "    background-color: gray;",
        "  }",
        "</style>",
        "",
        "<h2 class=\"red-text\">CatPhotoApp</h2>",
        "",
        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
        "",
        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
        "",
        "<div class=\"gray-background\">",
        "  <p>Things cats love:</p>",
        "  <ul>",
        "    <li>cat nip</li>",
        "    <li>laser pointers</li>",
        "    <li>lasagna</li>",
        "  </ul>",
        "  <p>Top 3 things cats hate:</p>",
        "  <ol>",
        "    <li>flea treatment</li>",
        "    <li>thunder</li>",
        "    <li>other cats</li>",
        "  </ol>",
        "</div>",
        "",
        "<form action=\"/submit-cat-photo\" id=\"cat-photo-form\">",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
        "  <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
        "  <button type=\"submit\">Submit</button>",
        "</form>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Usa un atributo ID para dar estilo a un elemento",
      "descriptionEs": [
        "Una cosa buena sobre los atributos <code>id</code> es que, al igual que con clases, puede darles estilo usando CSS.",
        "He aquí un ejemplo de cómo puede tomar su elemento con atributo <code>id</code> en <code>cat-photo-element</code> y póngale el color de fondo verde. En su elemento <code>style</code>: ",
        "<code>#cat-photo-element {</code>",
        "<code>&nbsp;&nbsp;background-color: green;</code>",
        "<code>}</code>",
        "Ten en cuenta que dentro de tu elemento <code>style</code>, siempre referencias clases poniendo un <code>.</code> en frente de sus nombres. Y siempre referencias identificaciones poniendo un <code>#</code> frente a sus nombres. ",
        "Trata de darle a tu formulario, que ahora tiene el atributo <code>id</code> en <code>cat-photo-form</code>, un fondo verde."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad88fee1348bd9aedf08825",
      "title": "Adjusting the Padding of an Element",
      "description": [
        "Now let's put our Cat Photo App away for a little while and learn more about styling HTML.",
        "You may have already noticed this, but all HTML elements are essentially little rectangles.",
        "Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
        "An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
        "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
        "When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
        "Change the <code>padding</code> of your green box to match that of your red box."
      ],
      "tests": [
        "assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .injected-text {",
        "    margin-bottom: -25px;",
        "    text-align: center;",
        "  }",
        "",
        "  .box {",
        "    border-style: solid;",
        "    border-color: black;",
        "    border-width: 5px;",
        "    text-align: center;",
        "  }",
        "",
        "  .yellow-box {",
        "    background-color: yellow;",
        "    padding:10px;",
        "  }",
        "  ",
        "  .red-box {",
        "    background-color:red;",
        "    padding: 20px;",
        "  }",
        "",
        "  .green-box {",
        "    background-color: green;",
        "    padding: 10px;",
        "  }",
        "</style>",
        "<h5 class=\"injected-text\">margin</h5>",
        "",
        "<div class=\"box yellow-box\">",
        "  <h5 class=\"box red-box\">padding</h5>",
        "  <h5 class=\"box green-box\">padding</h5>",
        "</div>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Ajusta el relleno de un elemento",
      "descriptionEs": [
        "Ahora vamos a dejar un poco de lado nuestra aplicación de fotos de gatos, y aprenderemos más sobre dar estilo a HTML",
        "Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.",
        "Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (<code>padding</code>), margen (<code>margin</code>) y borde (<code>border</code>)",
        "El relleno (<code>padding</code>) de un elmento controla la cantidad de espacio entre el elemento y su borde (<code>border</code>).",
        "Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Tenga en cuenta que el cuadro rojo tiene más <code>padding</code> que el cuadro verde. ",
        "Cuando aumentas el <code>padding</code> de la caja verde, aumentará la distancia entre el texto <code>padding</code> y el borde alrededor de este.",
        "Cambia el <code>padding</code> de la caja verde para que coincida con la de tu cuadro rojo."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Wegpunkt: Justiere den Innenabstand eines Elements",
      "descriptionDe": [
        "Die nächsten Wegpunkte werden dir drei wichtige Aspekte von Raum – und Zeit! – bei HTML Elementen näher bringen: <code>padding</code>, <code>margin</code> und <code>border</code>. Das mit der Zeit war ein Scherz. Gleiche nun den Innenabstand – <code>padding</code> – deiner grünen Box dem der roten Box an.",
        "<code>padding</code> kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – <code>border</code>",
        "Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>padding</code> hat als die grüne Box.",
        "Wenn du den Innenabstand der grünen Box – also <code>padding</code> – erhöhst, wird sich die Entfernung zwischen dem Text \"padding\" und dem Rahmen darum erhöhen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08822",
      "title": "Adjust the Margin of an Element",
      "description": [
        "An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
        "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the green box, making it appear smaller.",
        "When you increase the green box's <code>margin</code>, it will increase the distance between its border and surrounding elements.",
        "Change the <code>margin</code> of the green box to match that of the red box."
      ],
      "tests": [
        "assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .injected-text {",
        "    margin-bottom: -25px;",
        "    text-align: center;",
        "  }",
        "",
        "  .box {",
        "    border-style: solid;",
        "    border-color: black;",
        "    border-width: 5px;",
        "    text-align: center;",
        "  }",
        "",
        "  .yellow-box {",
        "    background-color: yellow;",
        "    padding:10px;",
        "  }",
        "  ",
        "  .red-box {",
        "    background-color:red;",
        "    padding: 20px;",
        "    margin: 20px;",
        "  }",
        "",
        "  .green-box {",
        "    background-color: green;",
        "    padding: 20px;",
        "    margin: 10px;",
        "  }",
        "</style>",
        "<h5 class=\"injected-text\">margin</h5>",
        "",
        "<div class=\"box yellow-box\">",
        "  <h5 class=\"box red-box\">padding</h5>",
        "  <h5 class=\"box green-box\">padding</h5>",
        "</div>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Ajusta el margen de un elemento",
      "descriptionEs": [
        "El margen (<code>margin</code>) de un elemento controla la cantidad de espacio entre el borde (<code>border</code>) y los elementos alrededor.",
        "Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Tenga en cuenta que la caja roja tiene más margen (<code>margin</code>) que la caja verde, haciendo que parezca más pequeña. ",
        "Cuando aumentas el margen (<code>margin</code>) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
        "Cambia el margen (<code>margin</code>) de la caja verde para que coincida con el de la caja roja."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Passe den Außenabstand eines Elements an",
      "descriptionDe": [
        "Gleiche den Außenabstand – <code>margin</code> der grünen Box dem der roten Box an.",
        "<code>margin</code> kontrolliert den Abstand zwischen dem Rahmen eines Elements und den benachbarten Elementen.",
        "Die grüne und die rote Box befinden sich beide erneut innerhalb der gelben Box. Beachte, dass die rote Box mehr <code>margin</code> aufweist als ihr Erzfeind – die grüne Box.",
        "Wenn du den Außenabstand – <code>margin</code> – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08823",
      "title": "Add a Negative Margin to an Element",
      "description": [
        "An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
        "If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
        "Try to set the <code>margin</code> to a negative value like the one for the red box.",
        "Change the <code>margin</code> of the green box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
      ],
      "tests": [
        "assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'message: Your <code>green-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .injected-text {",
        "    margin-bottom: -25px;",
        "    text-align: center;",
        "  }",
        "",
        "  .box {",
        "    border-style: solid;",
        "    border-color: black;",
        "    border-width: 5px;",
        "    text-align: center;",
        "  }",
        "",
        "  .yellow-box {",
        "    background-color: yellow;",
        "    padding:10px;",
        "  }",
        "  ",
        "  .red-box {",
        "    background-color:red;",
        "    padding: 20px;",
        "    margin: -15px;",
        "  }",
        "",
        "  .green-box {",
        "    background-color: green;",
        "    padding: 20px;",
        "    margin: 20px;",
        "  }",
        "</style>",
        "",
        "<div class=\"box yellow-box\">",
        "  <h5 class=\"box red-box\">padding</h5>",
        "  <h5 class=\"box green-box\">padding</h5>",
        "</div>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Agregar un margen negativo a un elemento",
      "descriptionEs": [
        "El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.",
        "Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.",
        "Trate de establecer el margen (<code>margin</code>) a un valor negativo como el de la caja roja.",
        "Cambia el margen (<code>margin</code>) de la caja verde a <code>-15px</code>, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Waypoint: Füge einem Element negativen Außenabstand hinzu",
      "descriptionDe": [
        "Passe den Außenabstand – <code>margin</code> – der grünen Box mit einem negativen Wert an, damit sie die gelbe Box horizontal ausfüllt.",
        "<code>margin</code> kontrolliert den Abstand zwischen dem Rahmen eines Elements und den benachbarten Elementen.",
        "Wenn du dem Außenabstand eines Elements einen negativen Wert zuweist, wird das Element größer.",
        "Versuche den Außenabstand auf einen negativen Wert wie bei der roten Box zu setzen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08824",
      "title": "Add Different Padding to Each Side of an Element",
      "description": [
        "Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
        "CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
        "Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
      ],
      "tests": [
        "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');",
        "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');",
        "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');",
        "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .injected-text {",
        "    margin-bottom: -25px;",
        "    text-align: center;",
        "  }",
        "",
        "  .box {",
        "    border-style: solid;",
        "    border-color: black;",
        "    border-width: 5px;",
        "    text-align: center;",
        "  }",
        "",
        "  .yellow-box {",
        "    background-color: yellow;",
        "    padding:10px;",
        "  }",
        "  ",
        "  .red-box {",
        "    background-color:red;",
        "    padding-top: 40px;",
        "    padding-right: 20px;",
        "    padding-bottom: 20px;",
        "    padding-left: 40px;",
        "  }",
        "",
        "  .green-box {",
        "    background-color: green;",
        "  }",
        "</style>",
        "<h5 class=\"injected-text\">margin</h5>",
        "",
        "<div class=\"box yellow-box\">",
        "  <h5 class=\"box red-box\">padding</h5>",
        "  <h5 class=\"box green-box\">padding</h5>",
        "</div>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Añade relleno diferente a cada lado de un elemento",
      "descriptionEs": [
        "A veces quieres personalizar un elemento para que tenga diferente relleno (<code>padding</code>) en cada uno de sus lados.",
        "CSS te permite controlar el <code>relleno</code> de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code>. ",
        "Da a la caja verde un relleno (<code>padding</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en sus partes inferior y derecha."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Wegpunkt: Gib jeder Seite eines Elements unterschiedlichen Innenabstand",
      "descriptionDe": [
        "Verleihe der grünen Box einen Innenabstand – <code>padding</code> – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.",
        "Manchmal wirst du einem Element unterschiedlichen Innenabstand – also <code>padding</code> – auf jeder Seite geben wollen.",
        "CSS erlaubt dir den Innenabstand eines Elements auf allen Seiten einzeln mit den Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu steuern."
      ]
    },
    {
      "id": "bad87fee1248bd9aedf08824",
      "title": "Add Different Margins to Each Side of an Element",
      "description": [
        "Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
        "CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties.",
        "Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
      ],
      "tests": [
        "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
        "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');",
        "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
        "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .injected-text {",
        "    margin-bottom: -25px;",
        "    text-align: center;",
        "  }",
        "",
        "  .box {",
        "    border-style: solid;",
        "    border-color: black;",
        "    border-width: 5px;",
        "    text-align: center;",
        "  }",
        "",
        "  .yellow-box {",
        "    background-color: yellow;",
        "    padding:10px;",
        "  }",
        "  ",
        "  .red-box {",
        "    background-color:red;",
        "    margin-top: 40px;",
        "    margin-right: 20px;",
        "    margin-bottom: 20px;",
        "    margin-left: 40px;",
        "  }",
        "",
        "  .green-box {",
        "    background-color: green;",
        "  }",
        "</style>",
        "<h5 class=\"injected-text\">margin</h5>",
        "",
        "<div class=\"box yellow-box\">",
        "  <h5 class=\"box red-box\">padding</h5>",
        "  <h5 class=\"box green-box\">padding</h5>",
        "</div>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Añade márgenes diferentes a cada lado de un elemento",
      "descriptionEs": [
        "A veces quieres personalizar un elemento para que tenga un margen (<code>margin</code>) diferente en cada uno de sus lados.",
        "CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> y <code>margin-left</code>. ",
        "Da a la caja verde un margen (<code>margin</code>) de <code>40px</code> en la parte superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Wegpunkt: Füge jeder Seite eines Elements unterschiedlichen Außenabstand hinzu",
      "descriptionDe": [
        "Gib der grünen Box einen Außenabstand – also <code>margin</code> – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.",
        "CSS erlaubt dir ebenfalls den Außenabstand auf jeder Seite einzeln mit den Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu steuern."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08826",
      "title": "Use Clockwise Notation to Specify the Padding of an Element",
      "description": [
        "Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this:",
        "<code>padding: 10px 20px 10px 20px;</code>",
        "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
        "Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
      ],
      "tests": [
        "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');",
        "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');",
        "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');",
        "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .injected-text {",
        "    margin-bottom: -25px;",
        "    text-align: center;",
        "  }",
        "",
        "  .box {",
        "    border-style: solid;",
        "    border-color: black;",
        "    border-width: 5px;",
        "    text-align: center;",
        "  }",
        "",
        "  .yellow-box {",
        "    background-color: yellow;",
        "    padding: 20px 40px 20px 40px;",
        "  }",
        "  ",
        "  .red-box {",
        "    background-color:red;",
        "    padding: 20px 40px 20px 40px;",
        "  }",
        "",
        "  .green-box {",
        "    background-color: green;",
        "  }",
        "</style>",
        "<h5 class=\"injected-text\">margin</h5>",
        "",
        "<div class=\"box yellow-box\">",
        "  <h5 class=\"box red-box\">padding</h5>",
        "  <h5 class=\"box green-box\">padding</h5>",
        "</div>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
      "descriptionEs": [
        "En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sola línea, así: ",
        "<code>padding: 10px 20px 10px 20px;</code>",
        "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
        "Usa la notación en sentido horario para darle a la clase \".green-box\" un relleno de <code>40px</code> en la parte superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
      "descriptionDe": [
        "Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – <code>padding</code> – von 40 Pixeln auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite.",
        "Anstatt die Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu verwenden, kannst du sie alle in einer Zeile schreiben: <code>padding: 10px 20px 10px 20px;</code>",
        "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bedeuten exakt das selbe wie die seitenspezifischen Anweisungen."
      ]
    },
    {
      "id": "bad87fee1348bd9afdf08726",
      "title": "Use Clockwise Notation to Specify the Margin of an Element",
      "description": [
        "Let's try this again, but with <code>margin</code> this time.",
        "Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this:",
        "<code>margin: 10px 20px 10px 20px;</code>",
        "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
        "Use <code>Clockwise Notation</code> to give the element with the <code>green-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
      ],
      "tests": [
        "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
        "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
        "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
        "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
      ],
      "challengeSeed": [
        "<style>",
        "  .injected-text {",
        "    margin-bottom: -25px;",
        "    text-align: center;",
        "  }",
        "",
        "  .box {",
        "    border-style: solid;",
        "    border-color: black;",
        "    border-width: 5px;",
        "    text-align: center;",
        "  }",
        "",
        "  .yellow-box {",
        "    background-color: yellow;",
        "    padding: 20px 40px 20px 40px;",
        "  }",
        "  ",
        "  .red-box {",
        "    background-color:red;",
        "    margin: 20px 40px 20px 40px;",
        "  }",
        "",
        "  .green-box {",
        "    background-color: green;",
        "  }",
        "</style>",
        "<h5 class=\"injected-text\">margin</h5>",
        "",
        "<div class=\"box yellow-box\">",
        "  <h5 class=\"box red-box\">padding</h5>",
        "  <h5 class=\"box green-box\">padding</h5>",
        "</div>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Utiliza notación en sentido horario para especificar el margen de un elemento",
      "descriptionEs": [
        "Vamos a intentar esto de nuevo, pero esta vez con el margen (<code>margin</code>).",
        "En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, y <code>padding-left</code> de un elemento, puedes especificarlas en una sóla línea así: ",
        "<code>margin: 10px 20px 10px 20px;</code>",
        "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
        "Usa <code>notación en sentido horario</code> para dar al elemento con la clase <code>green-box</code> un margen de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "Wegpunkt: Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
      "descriptionDe": [
        "Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also <code>margin</code>. Nutze die Notation im Uhrzeigersinn – auch <code>Clockwise Notation</code> genannt – um einem Element 40 Pixel Außenabstand auf der oberen und linken Seite, aber nur 20 Pixel auf der unteren und rechten Seite zu verleihen.",
        "Anstatt die Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu verwenden, kannst du alle in eine Zeile schreiben: <code>margin: 10px 20px 10px 20px;</code>",
        "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie meinen exakt das gleiche wie die seitenspezifischen Anweisungen."
      ]
    },
    {
      "id": "bad87fee1348bd9aedf08736",
      "title": "Style the HTML Body Element",
      "description": [
        "Now let's start fresh and talk about CSS inheritance.",
        "Every HTML page has a <code>body</code> element.",
        "We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.",
        "We can do this by adding the following to our <code>style</code> element:",
        "<code>body {</code>",
        "<code>&nbsp;&nbsp;background-color: black;</code>",
        "<code>}</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of black.');",
        "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;?\\s*\\}\\s*<\\/style>/i), 'message: Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');"
      ],
      "challengeSeed": [
        "<style>",
        "",
        "</style>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Da estilo en HTML al elemento cuerpo",
      "descriptionEs": [
        "Ahora vamos a empezar de nuevo y hablaremos de herencia CSS.",
        "Cada página HTML tiene un cuerpo (<code>body</code>).",
        "Podemos demostrar que el elemento (<code>body</code>) existe aquí, dandole un color de fondo (<code>background-color</code>) negro.",
        "Podemos hacer esto añadiendo lo siguiente a nuestro elemento <code>style</code>:",
        "<code>body {</code>",
        "<code>&nbsp;&nbsp;background-color: black;</code>",
        "<code>}</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08746",
      "title": "Inherit Styles from the Body Element",
      "description": [
        "Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.",
        "Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
        "First, create a <code>h1</code> element with the text <code>Hello World</code>",
        "Then, let's give all elements on your page the color of <code>green</code> by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
        "Finally, give your <code>body</code> element the font-family of <code>Monospace</code> by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
      ],
      "tests": [
        "assert(($(\"h1\").length > 0), 'message: Create an <code>h1</code> element.');",
        "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'message: Your <code>h1</code> element should have the text <code>Hello World</code>.');",
        "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'message: Make sure your <code>h1</code> element has a closing tag.');",
        "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');",
        "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'message: Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.');",
        "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'message: Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.');",
        "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: black;",
        "  }",
        "",
        "</style>"
      ],
      "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 (<code>body</code>), y que puede dársele estilo CSS.",
        "Recuerda, que puedes dar estilo de tu elemento <code>body</code> como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento <code>body</code>.",
        "En primer lugar, crea un elemento <code>h1</code> con el texto <code>Hello World</code>",
        "Después, vamos a darle a todos los elementos de tu página el color verde (<code>green</code>) añadiendo <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code>.",
        "Por último, da a tu elmento <code>body</code> el tipo de letra <code>Monospace</code> añadiendo <code>font-family: Monospace;</code> a la declaración del estilo de tu elemento <code>body</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08756",
      "title": "Prioritize One Style Over Another",
      "description": [
        "Sometimes your HTML elements will receive multiple styles that conflict with one another.",
        "For example, your <code>h1</code> element can't be both green and pink at the same time.",
        "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS property?",
        "Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
        "Give your <code>h1</code> element the class of <code>pink-text</code>."
      ],
      "tests": [
        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
        "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: black;",
        "    font-family: Monospace;",
        "    color: green;",
        "  }",
        "</style>",
        "<h1>Hello World!</h1>"
      ],
      "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í.",
        "Por ejemplo, el elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo.",
        "Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (<code>override</code>) nuestra clase la propiedad CSS <code>color: green</code> del elemento <code>body</code>?",
        "Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosado.",
        "Ponle a tu elemento <code>h1</code> la clase de <code>pink-text</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf04756",
      "title": "Override Styles in Subsequent CSS",
      "description": [
        "Our \"pink-text\" class overrode our <code>body</code> element's CSS declaration!",
        "We just proved that our classes will override the <code>body</code> element's CSS. So the next logical question is, what can we do to override our <code>pink-text</code> class?",
        "Create an additional CSS class called <code>blue-text</code> that gives an element the color blue. Make sure it's below your <code>pink-text</code> class declaration.",
        "Apply the <code>blue-text</code> class to your <code>h1</code> element in addition to your <code>pink-text</code> class, and let's see which one wins.",
        "Applying multiple class attributes to a HTML element is done with a space between them like this:",
        "<code>class=\"class1 class2\"</code>"
      ],
      "tests": [
        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
        "assert($(\".pink-text\").hasClass(\"blue-text\"), 'message: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');",
        "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h1</code> element should be blue.');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: black;",
        "    font-family: Monospace;",
        "    color: green;",
        "  }",
        "  .pink-text {",
        "    color: pink;",
        "  }",
        "</style>",
        "<h1 class=\"pink-text\">Hello World!</h1>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Anula los estilos en CSS posterior",
      "descriptionEs": [
        "Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento <code>body</code>!",
        "Acabamos de demostrar que nuestras clases anularán el CSS del elemento <code>body</code>. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase <code>pink-text</code>?",
        "Crea una clase CSS adicional llamada <code>texto-azul</code> que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase <code>pink-text</code>. ",
        "Aplica la clase <code>blue-text</code> a tu elemento <code>h1</code> además de tu clase <code>pink-text</code> y veamos cual gana.",
        "La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:",
        "<code>class=\"clase1 clase2\"</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd8aedf06756",
      "title": "Override Class Declarations by Styling ID Attributes",
      "description": [
        "We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.",
        "But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?",
        "Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.",
        "Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this:",
        "<code>&#60;h1 id=\"orange-text\"&#62;</code>",
        "Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
        "Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:",
        "<code>#brown-text {</code>",
        "<code>&nbsp;&nbsp;color: brown;</code>",
        "<code>}</code>"
      ],
      "tests": [
        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
        "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Give your <code>h1</code> element the id of <code>orange-text</code>.');",
        "assert(code.match(/#orange-text\\s*{/gi), 'message: Create a CSS declaration for your <code>orange-text</code> id');",
        "assert(!code.match(/<h1.*style.*>/gi), 'message: Do not give your <code>h1</code> any <code>style</code> attributes.');",
        "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'message: Your <code>h1</code> element should be orange.');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: black;",
        "    font-family: Monospace;",
        "    color: green;",
        "  }",
        "  .pink-text {",
        "    color: pink;",
        "  }",
        "  .blue-text {",
        "    color: blue;",
        "  }",
        "</style>",
        "<h1 class=\"pink-text blue-text\">Hello World!</h1>"
      ],
      "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. ",
        "Pero no hemos terminado todavía. Hay otras maneras que usted puede anular CSS. ¿Te acuerdas de los atributos id?",
        "Anulemos tus clases <code>pink-text</code> y <code>blue-text</code>, y pongamos anaranjado tu elemento <code>h1</code>, dándole una identificación al elemento <code>h1</code> y poniéndole estilo a esa identificación (<code>id</code>).",
        "Dale a tu elemento <code>h1</code> el atributo <code>id</code> con valor <code>orange-text</code>. Recuerda, los estilos id se ven así: ",
        "<code>&#60;h1 id=\"orange-text\"&#62;</code>",
        "Deja las clases <code>blue-text</code> y <code>pink-text</code> de tu elemento <code>h1</code>.",
        "Crea una declaración CSS para tu identificación <code>orange-text</code> en tu elemento <code>estilo</code>. He aquí un ejemplo de como se ve esto: ",
        "<code>#brown-text {</code>",
        "<code>&nbsp;&nbsp;color: brown;</code>",
        "<code>}</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf06756",
      "title": "Override Class Declarations with Inline Styles",
      "description": [
        "So we've proven that id declarations override class declarations, regardless of where they are declared in your <code>style</code> element CSS.",
        "There are other ways that you can override CSS. Do you remember inline styles?",
        "Use an <code>in-line style</code> to try to make our <code>h1</code> element white. Remember, in line styles look like this:",
        "<code>&#60;h1 style=\"color: green\"&#62;</code>",
        "Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element."
      ],
      "tests": [
        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
        "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.');",
        "assert(code.match(/<h1[\\s\\S]*?style/gi) && code.match(/<h1[\\s\\S]*?style[\\s\\S]*?color\\s*?:/gi), 'message: Give your <code>h1</code> element the inline style of <code>color&#58; white</code>.');",
        "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'message: Your <code>h1</code> element should be white.');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: black;",
        "    font-family: Monospace;",
        "    color: green;",
        "  }",
        "  #orange-text {",
        "    color: orange;",
        "  }",
        "  .pink-text {",
        "    color: pink;",
        "  }",
        "  .blue-text {",
        "    color: blue;",
        "  }",
        "</style>",
        "<h1 id=\"orange-text\" class=\"pink-text blue-text\">Hello World!</h1>"
      ],
      "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 <code>style</code>.",
        "Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?",
        "Utiliza un <code>in-line style</code> para tratar de hacer blanco nuestro elemento <code>h1</code>. Recuerda, los estilos en línea se ven así: ",
        "<code>&#60;h1 style=\"color: green\"&#62;</code>",
        "Deja las clases <code>blue-text</code> y <code>pink-text</code> en tu elmento <code>h1</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf07756",
      "title": "Override All Other Styles by using Important",
      "description": [
        "Yay! We just proved that in-line styles will override all the CSS declarations in your <code>style</code> element.",
        "But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
        "In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>",
        "Let's go all the way back to our <code>pink-text</code> class declaration. Remember that our <code>pink-text</code> class was overridden by subsequent class declarations, id declarations, and in-line styles.",
        "Let's add the keyword <code>!important</code> to your pink-text element's color declaration to make 100% sure that your <code>h1</code> element will be pink.",
        "An example of how to do this is:",
        "<code>color: red !important;</code>"
      ],
      "tests": [
        "assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
        "assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
        "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.');",
        "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'message: Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.');",
        "assert(code.match(/pink.*\\!important;/gi), 'message: Your <code>pink-text</code> class should have the <code>!important</code> keyword to override all other declarations.');",
        "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: black;",
        "    font-family: Monospace;",
        "    color: green;",
        "  }",
        "  #orange-text {",
        "    color: orange;",
        "  }",
        "  .pink-text {",
        "    color: pink;",
        "  }",
        "  .blue-text {",
        "    color: blue;",
        "  }",
        "</style>",
        "<h1 id=\"orange-text\" class=\"pink-text blue-text\" style=\"color: white\">Hello World!</h1>"
      ],
      "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 <code>style</code>. ",
        "¡Pero espera! Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, vamos a hablar de por qué puedes querer anular CSS. ",
        "En muchas situaciones, usarás bibliotecas CSS. Estas pueden anular accidentalmente tu propio CSS. Por eso, cuando necesitas estar seguro de que un elemento tiene un CSS específico puedes usar <code>!important</code>",
        "Regresemos a nuestra declaración de clase <code>pink-text</code>. Recuerda que nuestra clase <code>pink-text</code> fue anulada por declaraciones de clases posteriores, declaraciones id, y estilos en línea. ",
        "Vamos a añadir la palabra clave <code>!important</code> a tu declaración del color de <code>pink-text</code> para estar 100% seguros que tu elemento <code>h1</code> será rosado.",
        "Un ejemplo de cómo hacer esto es:",
        "<code>color: red !important;</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08726",
      "title": "Use Hex Code for Specific Colors",
      "description": [
        "Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.",
        "The word <code>Hexadecimal</code> can be broken down into the words <code>hexa</code> and <code>decimal</code>. You may be familiar with <code>decimal</code> being a number like 0.10 or 0.333. In CSS, <code>decimal</code> can be thought of as the numbers zero through nine, giving a total of ten numbers. The word <code>hexa</code>, as you might guess, means six. In CSS, this refers to the letters A, B, C, D, E, and F. Putting these together, each place value of a <code>hexadecimal</code> can be a number 0 to 9 or A through F, giving us a total of 16 possible values. You can find more information about hexadecimal numbers <a href=\"https://en.wikipedia.org/wiki/Hexadecimal\">here</a>",
        "With CSS, we use 6 hexadecimal numbers to represent colors. For example, <code>#000000</code> is the lowest possible value, and it represents the color black.",
        "Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code> "
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the background-color of black.');",
        "assert(code.match(/#000000/g) && code.match(/#000000/g).length > 0, 'message: Use the <code>hex code</code> for the color black instead of the word <code>black</code>. For example <code>body { color&#58; #000000; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: black;",
        "  }",
        "</style>"
      ],
      "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 <code>código hex</code> para abreviar. ",
        "<code>Decimal</code> se refiere a los números del cero al nueve -. los números que la gente usa en la vida cotidiana. <code>Hexadecimal</code> incluye estos 10 números, más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 valores posibles, en lugar de los 10 valores posibles que nos da nuestro sistema numérico normal en base-10. ",
        "Con CSS, utilizamos 6 números hexadecimales para representar los colores. Por ejemplo, <code>#000000</code> es el valor más bajo posible, y representa el color negro. ",
        "Reemplaza la palabra <code>negro</code> en el color de fondo (<code>background-color</code>) de nuestro elemento <code>body</code> por su representación hexadecimal <code>#000000</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08725",
      "title": "Use Hex Code to Color Elements White",
      "description": [
        "<code>0</code> is the lowest number in hex code, and represents a complete absence of color.",
        "<code>F</code> is the highest number in hex code, and it represents the maximum possible brightness.",
        "Let's turn our <code>body</code> element's background-color white by changing its hex code to <code>#FFFFFF</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your <code>body</code> element should have the <code>background-color</code> of white.');",
        "assert(code.match(/#FFFFFF/ig) && code.match(/#FFFFFF/ig).length > 0, 'message: Use the <code>hex code</code> for the color white instead of the word <code>white</code>. For example <code>body { color&#58; #FFFFFF; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #000000;",
        "  }",
        "</style>"
      ],
      "type": "waypoint",
      "challengeType": 0,
      "nameCn": "",
      "descriptionCn": [],
      "nameFr": "",
      "descriptionFr": [],
      "nameRu": "",
      "descriptionRu": [],
      "nameEs": "Usa el código hexadecimal para colorear de blanco los elementos",
      "descriptionEs": [
        "<code>0</code> es el número más bajo en código hexadecimal, y representa una completa ausencia de color.",
        "<code>F</code> es el número más alto en código hexadecimal, y representa el máximo brillo posible.",
        "Volvamos blanco el color de fondo (<code>background-color</code>) de nuestro elemento <code>body</code>, cambiando su código hexadecimal por <code>#FFFFFF</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08724",
      "title": "Use Hex Code to Color Elements Red",
      "description": [
        "You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.",
        "How many colors are possible? 16 values and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors.",
        "Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
        "So to get the absolute brightest red, you would just use <code>F</code> for the first and second digits (the highest possible value) and <code>0</code> for the third, fourth, fifth and sixth digits (the lowest possible value).",
        "Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of red.');",
        "assert(code.match(/#FF0000/ig) && code.match(/#FF0000/ig).length > 0, 'message: Use the <code>hex code</code> for the color red instead of the word <code>red</code>. For example <code>body { color&#58; #FF0000; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #FFFFFF;",
        "  }",
        "</style>"
      ],
      "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. ",
        "¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ",
        "Los códigos hexadecimales siguen el formato rojo-verde-azul (<em>red-green-blue</em>) o formato <code>rgb</code>. 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 <code>F</code> para el primer y segundo dígitos (el valor más alto posible) y <code>0</code> para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).",
        "Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea rojo dándole el código hexadecimal <code>#FF0000</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08723",
      "title": "Use Hex Code to Color Elements Green",
      "description": [
        "Remember that <code>hex code</code> follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
        "So to get the absolute brightest green, you would just use <code>F</code> for the third and fourth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
        "Make the <code>body</code> element's background color green by giving it the hex code value of <code>#00FF00</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of <code>green</code>.');",
        "assert(code.match(/#00FF00/ig) && code.match(/#00FF00/ig).length > 0, 'message: Use the <code>hex code</code> for the color green instead of the word <code>green</code>. For example <code>body { color&#58; #00FF00; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #FF0000;",
        "  }",
        "</style>"
      ],
      "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 <code>código hexadecimal</code> sigue el formato rojo-verde-azul o <code>rgb</code>. 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 <code>F</code> en el tercer y cuarto dígitos (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible). ",
        "Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea verde, dándole el código hexadecimal <code>#00FF00</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08722",
      "title": "Use Hex Code to Color Elements Blue",
      "description": [
        "Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
        "So to get the absolute brightest blue, we use <code>F</code> for the fifth and sixth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
        "Make the <code>body</code> element's background color blue by giving it the hex code value of <code>#0000FF</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Give your <code>body</code> element the <code>background-color</code> of blue.');",
        "assert(code.match(/#0000FF/ig) && code.match(/#0000FF/ig).length > 0, 'message: Use the <code>hex code</code> for the color blue instead of the word <code>blue</code>. For example <code>body { color&#58; #0000FF; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #00FF00;",
        "  }",
        "</style>"
      ],
      "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 <code>rgb</code>. 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 <code>F</code> para la quinta y sexta cifras (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible ). ",
        "Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea azul, dándole el código hexadecimal <code>#0000FF</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08721",
      "title": "Use Hex Code to Mix Colors",
      "description": [
        "From these three pure colors (red, green and blue), we can create 16 million other colors.",
        "For example, orange is pure red, mixed with some green, and no blue.",
        "Make the <code>body</code> element's background color orange by giving it the hex code value of <code>#FFA500</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of orange.');",
        "assert(code.match(/#FFA500/ig) && code.match(/#FFA500/ig).length > 0, 'message: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. For example <code>body { color&#58; #FFA500; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #0000FF;",
        "  }",
        "</style>"
      ],
      "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 <code>body</code> sea anaranjado, dándole el código hexadecimal <code>#FFA500</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aede08720",
      "title": "Use Hex Code to Color Elements Gray",
      "description": [
        "From these three pure colors (red, green and blue), we can create 16 million other colors.",
        "We can also create different shades of gray by evenly mixing all three colors.",
        "Make the <code>body</code> element's background color gray by giving it the hex code value of <code>#808080</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Give your <code>body</code> element the <code>background-color</code> of gray.');",
        "assert(code.match(/#808080/g) && code.match(/#808080/g).length > 0, 'message: Use the <code>hex code</code> the color gray instead of the word <code>gray</code>. For example <code>body { color&#58; #808080; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #FFA500;",
        "  }",
        "</style>"
      ],
      "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.",
        "Hacer que el color de fondo del elemento <code>body</code> sea gris, dándole el código hexadecimal <code>#808080</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08720",
      "title": "Use Hex Code for Specific Shades of Gray",
      "description": [
        "We can also create other shades of gray by evenly mixing all three colors. We can go very close to true black.",
        "Make the <code>body</code> element's background color a dark gray by giving it the hex code value of <code>#111111</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'message: Give your <code>body</code> element the <code>background-color</code> of a dark gray.');",
        "assert(code.match(/#111111/g) && code.match(/#111111/g).length > 0, 'message: Use <code>hex code</code> to make a dark gray. For example <code>body { color&#58; #111111; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #808080;",
        "  }",
        "</style>"
      ],
      "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 <code>body</code> sea gris oscuro dandole el código hexadecimal <code>#111111</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aedf08719",
      "title": "Use Abbreviated Hex Code",
      "description": [
        "Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.",
        "For example, red, which is <code>#FF0000</code> in hex code, can be shortened to <code>#F00</code>. That is, one digit for red, one digit for green, one digit for blue.",
        "This reduces the total number of possible colors to around 4,000. But browsers will interpret <code>#FF0000</code> and <code>#F00</code> as exactly the same color.",
        "Go ahead, try using <code>#F00</code> to turn the <code>body</code> element's background-color red."
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of red.');",
        "assert(code.match(/#F00/ig) && code.match(/#F00/ig).length > 0, 'message: Use <code>abbreviated hex code</code> instead of a six-character <code>hex code</code>. For example <code>body { color&#58; #F00; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #111111;",
        "  }",
        "</style>"
      ],
      "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, usted puede acortarlo. ",
        "Por ejemplo, el rojo, que es <code>#FF0000</code> en código hexadecimal, se puede abreviar a <code>#F00</code>. 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 <code>#FF0000</code> y <code>#F00</code> como exactamente el mismo color. ",
        "Adelante, intente usar <code>#F00</code> para volver rojo el color de fondo del elemento <code>body</code>."
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad87fee1348bd9aede08718",
      "title": "Use RGB values to Color Elements",
      "description": [
        "Another way you can represent colors in CSS is by using <code>rgb</code> values.",
        "The RGB value for black looks like this:",
        "<code>rgb(0, 0, 0)</code>",
        "The RGB value for white looks like this:",
        "<code>rgb(255, 255, 255)</code>",
        "Instead of using six hexadecimal digits like you do with hex code, with <code>rgb</code> you specify the brightness of each color with a number between 0 and 255.",
        "If you do the math, 16 times 16 is 256 total values. So <code>rgb</code>, which starts counting from zero, has the exact same number of possible values as hex code.",
        "Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your <code>body</code> element should have a black background.');",
        "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of black. For example <code>body { background-color&#58; rgb&#40;0&#44; 0&#44; 0&#41;; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: #F00;",
        "  }",
        "</style>"
      ],
      "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 <code>rgb</code>.",
        "El valor RGB para el negro, luce así:",
        "<code>rgb(0, 0, 0)</code>",
        "El valor RGB para el blanco, se ve así:",
        "<code>rgb(255, 255, 255)</code>",
        "En lugar de utilizar seis dígitos hexadecimales, con <code>rgb</code> 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 <code>rgb</code>, 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 <code>body</code> por el valor RGB para el negro: <code>rgb(0, 0, 0)</code>"
      ],

      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad88fee1348bd9aedf08726",
      "title": "Use RGB to Color Elements White",
      "description": [
        "The RGB value for black looks like this:",
        "<code>rgb(0, 0, 0)</code>",
        "The RGB value for white looks like this:",
        "<code>rgb(255, 255, 255)</code>",
        "Instead of using six hexadecimal digits like you do with hex code, with <code>rgb</code> you specify the brightness of each color with a number between 0 and 255.",
        "Change the <code>body</code> element's background color from the RGB value for black to the <code>rgb</code> value for white: <code>rgb(255, 255, 255)</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your <code>body</code> should have a white background.');",
        "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of white. For example <code>body { background-color&#58; rgb&#40;255&#44; 255 &#44; 255&#41;; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: rgb(0, 0, 0)",
        "  }",
        "</style>"
      ],
      "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í:",
        "<code>rgb(0, 0, 0)</code>",
        "El valor RGB para el blanco, se ve así:",
        "<code>rgb(255, 255, 255)</code>",
        "En lugar de utilizar seis dígitos hexadecimales, con <code>rgb</code> especificas el brillo de cada color con un número entre 0 y 255.",
        "Cambia el color de fondo del elemento <code>body</code> del valor RGB para el negro al valor <code>rgb</code> para el blanco: <code>rgb(255, 255, 255)</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad89fee1348bd9aedf08724",
      "title": "Use RGB to Color Elements Red",
      "description": [
        "Just like with hex code, you can represent different colors in RGB by using combinations of different values.",
        "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 <code>body</code> element's background color to the RGB value red: <code>rgb(255, 0, 0)</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Your <code>body</code> should have a red background.');",
        "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of red. For example <code>body { background-color&#58; rgb&#40;255&#44; 0&#44; 0&#41;; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: rgb(255, 255, 255)",
        "  }",
        "</style>"
      ],
      "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 <code>body</code> al rojo usando su valor RGB: <code>rgb(255, 0, 0)</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad80fee1348bd9aedf08723",
      "title": "Use RGB to Color Elements Green",
      "description": [
        "Now change the <code>body</code> element's background color to the <code>rgb</code> value green: <code>rgb(0, 255, 0)</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Your <code>body</code> element should have a green background.');",
        "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of green. For example <code>body { background-color&#58; rgb&#40;0&#44; 255&#44; 0&#41;; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: rgb(255, 0, 0);",
        "  }",
        "</style>"
      ],
      "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 <code>body</code> a verde usando su valor RGB: <code>rgb (0, 255, 0)</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad81fee1348bd9aedf08722",
      "title": "Use RGB to Color Elements Blue",
      "description": [
        "Change the <code>body</code> element's background color to the RGB value blue: <code>rgb(0, 0, 255)</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Your <code>body</code> element should have a blue background.');",
        "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of blue. For example <code>body { background-color&#58; rgb&#40;0&#44; 0&#44; 255&#41;; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: rgb(0, 255, 0);",
        "  }",
        "</style>"
      ],
      "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 <code>body</code> a azul usando su valor RGB: <code>rgb(0, 0, 255)</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    },
    {
      "id": "bad82fee1348bd9aedf08721",
      "title": "Use RGB to Mix Colors",
      "description": [
        "Just like with hex code, you can mix colors in RGB by using combinations of different values.",
        "Change the <code>body</code> element's background color to the RGB value orange: <code>rgb(255, 165, 0)</code>"
      ],
      "tests": [
        "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Your <code>body</code> element should have an orange background.');",
        "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of orange. For example <code>body { background-color&#58; rgb&#40;255&#44; 165&#44; 0&#41;; }</code>');"
      ],
      "challengeSeed": [
        "<style>",
        "  body {",
        "    background-color: rgb(0, 0, 255);",
        "  }",
        "</style>"
      ],
      "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 <code>body</code> a anaranjado usando su valor RGB: <code>rgb(255, 165, 0)</code>"
      ],
      "namePt": "",
      "descriptionPt": [],
      "nameDe": "",
      "descriptionDe": []
    }
  ]
}