"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code><h1></code>. Closing tags look like this: <code></h1></code>. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
"Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
"To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
],
"tests":[
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".')"
],
"challengeSeed":[
"<h1>Hello</h1>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"Waypoint: Saluda a los Elementos HTML",
"descriptionEs":[
"¡Bienvenido/a al primer desafío de programación de Free Code Camp! Haz click en el botón de abajo para tener más instrucciones.",
"Genial. Ahora puedes leer el resto de las instrucciones de este desafío.",
"Puedes editar tu <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><h1>Hello</h1></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><h1></code>. Las etiquetas de cierre se ven como: <code></h1></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 (<).",
"Una vez que hayas completado cada desafío, y que hayas pasado todas sus pruebas, el botón \"Ir a mi siguiente desafío\" se activará. Haz click en él - o presiona control y enter al mismo tiempo - para avanzar al siguiente desafío.",
"Para activar el botón \"Ir a mi siguiente desafío\" de este ejercicio, cambia tu texto de la etiqueta <code>h1</code> para que diga \"Hello World\" en lugar de \"Hello\"."
"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><h1>Hallo</h1></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><h1></code>. Schließende Tags so: <code></h1></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\"."
"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.",
"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."
],
"tests":[
"assert(($('h2').length > 0), 'Create an <code>h2</code> element.')",
"assert(editor.match(/<\\/h2>/g) && editor.match(/<\\/h2>/g).length === editor.match(/<h2>/g).length, 'Make sure your <code>h2</code> element has a closing tag.')",
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your <code>h2</code> element should have the text \"CatPhotoApp\".')",
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".')"
],
"challengeSeed":[
"<h1>Hello World</h1>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"Waypoint: Encabezado con el elemento h2",
"descriptionEs":[
"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\".",
"El elemento h2 que ingreses creará un elemento h2 en el sitio web.",
"Este elemento le dice al navegador cómo mostrar el texto que contiene.",
"Los elementos <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>."
"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."
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\".",
"<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 so: <code><p>I'm a p tag!</p></code>."
],
"tests":[
"assert(($('p').length > 0), 'Create a <code>p</code> element.')",
"assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure your <code>p</code> element has a closing tag.')"
],
"challengeSeed":[
"<h1>Hello World</h1>",
"<h2>CatPhotoApp</h2>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"Waypoint: Informa con el Elemento Párrafo",
"descriptionEs":[
"Crea un elemento párrafo debajo de tu elemento h2, y dale el texto \"Hello Paragraph\". Apenas escribas la etiqueta de apertura <code><p></code>, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre <code></p></code>.",
"Los elementos párrafo son los principales elementos para los párrafos de texto en tamaño normal en sitios web.",
"Tú puedes crear un elemento párrafo como éste: <code><p>I'm a p tag!</p></code>."
"Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
"\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!",
"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>"
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided \"Kitty Ipsum\" text.')"
],
"challengeSeed":[
"<h1>Hello World</h1>",
"",
"<h2>CatPhotoApp</h2>",
"",
"<p>Hello Paragraph</p>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"Waypoint: Llena espacios con texto de relleno",
"descriptionEs":[
"Cambia el texto en el elemento <code>p</code> para usar las primeras palabras del texto <code>Kitty Ipsum</code>.",
"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 <a href='http://kittyipsum.com/'>Kitty Ipsum</a>!",
"Aquí están las primeras palabras del texto Kitty Ipsum, que puedes copiar y pegar en la posición correcta: <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>"
"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>"
"Let's remove the unnecessary elements so we can start building our CatPhotoApp."
],
"tests":[
"assert(($('h1').length == 0), 'Delete your <code>h1</code> element.')",
"assert(($('h2').length > 0), 'Leave your <code>h2</code> element on the page.')",
"assert(($('p').length > 0), '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>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"Waypoint: Borra elementos HTML",
"descriptionEs":[
"Borra los elementos h1 y br para simplificar nuestra vista.",
"Nuestro teléfono no tiene mucho espacio para elementos HTML.",
"Removamos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp."
"Change your <code>h2</code> element's style so that its text color is red.",
"We can do this by changing the \"style\" 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><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
],
"tests":[
"assert($('h2').css('color') === 'rgb(255, 0, 0)', '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>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"Waypoint: Cambia el color del texto",
"descriptionEs":[
"Cambia el estilo del elemento <code>h2</code> de manera que el color de su texto sea rojo.",
"Podemos hacer esto por medio de cambiar el <code>estilo</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 volver el color de texto de tu elemento <code>h2</code> en azul: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
"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.",
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an \"inline style\".",
"That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).",
"At the top of your code, create a <code>style</code> element like this: <code><style></style></code>.",
"Inside that style element, you can create a \"CSS selector\" 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><style>h2 {color: red;}</style></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."
],
"tests":[
"assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your <code>h2</code> element should be blue.')",
"assert(!$('h2').attr('style'), 'Remove the style attribute from your <code>h2</code> element.')",
"assert(($('style').length > 1), 'Create a <code>style</code> element.')",
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/<style>/g).length, 'Make sure each of your <code>style</code> elements has 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>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"Waypoint: Usa selectores CSS para dar estilo a los elementos",
"descriptionEs":[
"Borra el atributo <code>style</code> de tu elemento <code>h2</code> y escribe el CSS para hacer todos los elementos <code>h2</code> de color azul.",
"Con CSS, hay cientos de <code>atributos CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.",
"Cuando entraste <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, le estuviste dando a ese elemento h2 en particular 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 una <code>etiqueta style</code> como ésta: <code><style></style></code>.",
"Dentro de ese elemento style, puedes crear un <code>selector css</code> para todos los elementos <code>h2</code>. Por ejemplo, si querías que todos los elementos <code>h2</code> sean rojos, tu elemento style se vería así: <code><style>h2 {color: red;}</style></code>.",
"Fíjate que es importante tener <code>llaves de apertura y de cierre</code> (<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."
"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><h2 style=\"color: red\">CatPhotoApp</h2></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><style></style></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><style>h2 {color: red;}</style></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."
"Create a CSS class called \"red-text\" and apply it to your <code>h2</code> element.",
"Classes are reusable styles that can be added to HTML elements.",
"Here's the anatomy of a CSS class:",
"<img class='img-responsive' alt='a diagram of how style tags are composed, which is also described in detail on the following lines.' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>",
"You can see that we've created a CSS class called \"blue-text\" within the <code><style></code> tag.",
"You can apply a class to an HTML element like this: <code><h2 class=\"blue-text\">CatPhotoApp</h2></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 \".red-text\"."
],
"tests":[
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')",
"assert($('h2').attr('style') === undefined, 'Please make sure there is no inline <code> style = </code> in you <code>h2</code> and change the color by using the css class <code> red-text </code>')"
"<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>"
"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><style></code> geschrieben haben.",
"Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <code><h2 class=\"blue-text\">CatPhotoApp</h2></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."
"Remember that CSS selectors require a period at the beginning like this: <code>.blue-text { color: blue; }</code>, but that class declarations don't use a period, like this: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>."
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')",
"assert($('h2').hasClass('red-text'), 'Your <code>h2</code> element should have the class \"red-text\".')",
"assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your <code>p</code> element should be red.')",
"assert($('p').hasClass('red-text'), 'Your <code>p</code> element should have the class \"red-text\".')"
],
"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>"
"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><h2 class=\"blue-text\">CatPhotoApp<h2></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>",
"Then, inside your <code><style></code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
"Font size is controlled by the \"font-size\" CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your \"red-text\" class."
],
"tests":[
"assert($('p').length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided additional \"Kitty Ipsum\" text.')",
"assert($('p').css('font-size') === '16px', 'Give your <code>p</code> elements the font-size of 16px.')"
],
"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>"
"nameDe":"Waypoint: Ändere die Schriftgröße eines Elements",
"descriptionDe":[
"Erstelle ein zweites <code>p</code> Element. Ändere dann innerhalb deines <code><style></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><style></code> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben."
"Make all of your <code>p</code> elements use the \"Monospace\" font.",
"You can set an element's font by using the \"font-family\" attribute.",
"For example, if you wanted to set your <code>h2</code> element's font to \"Sans-serif\", you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
],
"tests":[
"assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> elements should use the font \"Monospace\".')"
],
"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>"
"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>."
"Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element."
],
"tests":[
"assert(new RegExp('googleapis', 'gi').test(editor), 'Import the \"Lobster\" font.')",
"assert($('h2').css('font-family').match(/lobster/i), 'Your <code>h2</code> element should use the font \"Lobster\".')",
"assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> element should still use the font \"Monospace\".')"
],
"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>"
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". Leave \"Lobster\" as the font-family for your <code>h2</code> elements. Make them \"degrade\" to \"Monospace\" when \"Lobster\" isn't available.",
"For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
"assert($('h2').css('font-family').match(/lobster.*,.*monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')",
"assert(new RegExp('<!--', 'gi').test(editor), 'Comment out your call to Google for the \"Lobster\" font by putting <code><!-- in front of it.')",
"assert(new RegExp('-->', 'gi').test(editor), 'Be sure to close your comment by deleting all trailing comment tags, i.e. <code>--></code>.')"
"<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>"
"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."
"You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.",
"An example of this would be <code><img src=\"www.your-image-source.com/your-image.jpg\"/></code>. Note that in most cases, <code>img</code> elements are self-closing.",
"Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
],
"tests":[
"assert($('img').length > 0, 'Your page should have an image element.')",
"assert($('img').filter(function(index) { return /http:\\/\\/bit\\.ly\\/fcc-kittens/gi.test($('img').attr('src')); }).length > 0, 'Your image should have have a <code>src</code> attribute that points to the kitten image.')"
"<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>"
"nameDe":"Waypoint: Füge Bilder zu deiner Website hinzu",
"descriptionDe":[
"Nutze ein <code>img</code> Element um das Bild <code>http://bit.ly/fcc-kittens</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><img src=\"www.bild-quelle.com/bild.jpg\"/></code>. Beachte, dass <code>img</code> Elemente in den meisten Fällen selbstschließend sind.",
"Versuche es mit diesem Bild: <code>http://bit.ly/fcc-kittens</code>."
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>.",
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
"<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>"
"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><style> .larger-image { width: 500px; } </style></code>."
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>.",
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo."
"<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>"
"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><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>."
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels.",
"Give your cat photo a <code>border-radius</code> of 10 pixels."
"<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>"
"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."
"assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')",
"assert(editor.match(/50%/g), 'Be sure to use a percentage instead of a pixel value.')"
"<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>"
"<code>a</code> elements or \"anchor\" 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.",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>.",
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its \"anchor text\"."
"assert(/http:\\/\\/catphotoapp\\.com/gi.test($('a').attr('href')), 'You need an <code>a</code> element that links to <code>http://catphotoapp.com<code>.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
"<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>"
"nameDe":"Waypoint: Verlinke externe Seiten mit Anker Elementen",
"descriptionDe":[
"Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://catphotoapp.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><p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p></code>."
"Again, here's a diagram of an <code>a</code> element for your reference:",
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>.",
"Now wrap your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text."
"assert($('p') && $('p').length > 2, 'Create a new <code>p</code> element around your <code>a</code> element. \"click here for\".')",
"assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your <code>a</code> element should be wrapped within your new <code>p</code> element.')",
"assert($('p').text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
"<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>"
"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><p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p></code>"
"<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>"
"You can make elements into links by wrapping them within an <code>a</code> element.",
"Wrap your image within an <code>a</code> element. Here's an example: <code><a href='#'><img src='http://bit.ly/fcc-kittens2'/></a></code>.",
"Remember to use the hash symbol (#) 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(new RegExp('#').test($('a').children('img').parent().attr('href')), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')",
"assert($('a').children('img').length > 0, 'Wrap your image element within an <code>a</code> element.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
"<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>"
"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><a href='#'><img src='http://bit.ly/fcc-kittens2'/></a></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."
"<code>alt</code> attributes, also known as \"alt text\", 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.",
"You can add an <code>alt</code> attribute right in the img element like this: <code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/></code>.",
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo."
"assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')"
"<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>"
"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><img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/></code>."
"For example: <code><ul><li>milk</li><li>cheese</li></ul></code> would create a bulleted list of \"milk\" and \"cheese\".",
"Replace your <code>p</code> elements with an unordered list of three things that cats love."
"assert(editor.match(/<\\/ul>/g) && editor.match(/<ul/g) && editor.match(/<\\/ul>/g).length === editor.match(/<ul/g).length, 'Make sure your <code>ul</code> element has a closing tag.')",
"assert(editor.match(/<\\/li>/g) && editor.match(/<li>/g) && editor.match(/<\\/li>/g).length === editor.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.')"
"<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>"
"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><ul></code> Element. Dann beinhalten sie eine gewisse Anzahl an <code><li></code> Elementen.",
"Als Beispiel: <code><ul><li>Milch</li><li>Käse</li></ul></code> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen."
"For example: <code><ol><li>hydrogen</li><li>helium</li></ol></code> would create a numbered list of \"hydrogen\" and \"helium\".",
"Create an ordered list of the top 3 things cats hate the most."
"assert($('ul').length > 0, 'You should have an <code>ul</code> element on your page.')",
"assert($('ol').length > 0, 'You should have an <code>ol</code> element on your page.')",
"assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ul</code> element.')",
"assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ol</code> element.')",
"assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.')",
"assert(editor.match(/<\\/ol>/g) && editor.match(/<\\/ol>/g).length === editor.match(/<ol>/g).length, 'Make sure your <code>ol</code> element has a closing tag.')",
"assert(editor.match(/<\\/li>/g) && editor.match(/<li>/g) && editor.match(/<\\/li>/g).length === editor.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.')"
"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><ol></code> Element. Dann enthalten sie eine gewisse Anzahl an <code><li></code> Elementen.",
"Als beispiel: <code><ol><li>hydrogen</li><li>Helium</li></ol></code> würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen."
"assert($('input') && $('input').attr('placeholder') && $('input').attr('placeholder').match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".')"
"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.",
"assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
"assert($('form').attr('action'), 'Your <code>form</code> element should have an <code>action</code> attribute.')",
"assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'Make sure your <code>form</code> element has a closing tag.')",
"assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your <code>form</code> action is set to <code>/submit-cat-photo</code>.')"
"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.",
"Let's add a submit 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.",
"assert($('button').text().match(/submit/gi), 'Your submit button should have the text \"submit\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
"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><button type='submit'>Diese Schaltfläche überträgt die Daten des Formulars.</button></code>."
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code><input type='text' required></code>.",
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field."
"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><input type='text' required></code>."
"Here's an example of a radio button: <code><label><input type='radio' name='indoor-outdoor'> Indoor</label></code>.",
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')",
"assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($('label').text().match(/indoor/gi), 'One of your radio buttons should have the label \"indoor\".')",
"assert($('label').text().match(/outdoor/gi), 'One of your radio buttons should have the label \"outdoor\".')"
"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><label><input type='radio' name='indoor-outdoor'> Indoor</label></code>."
"Forms commonly use \"checkboxes\" for questions that may have more than one answer.",
"Checkboxes are a type of <code>input</code>.",
"Each of your checkboxes should be wrapped 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><label><input type='checkbox' name='personality'> Loving</label></code>.",
"Add to your form a set of three checkboxes. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
"assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be wrapped in its own <code>label</code> element.')",
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
"assert($('input[type=\"checkbox\"]:nth-child(1)').attr('name') === 'personality', 'Give your checkboxes buttons the <code>name</code> attribute of \"personality\".')"
"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.",
"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><input type='radio' name='test-name' checked></code>.",
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default."
"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><input type='radio' name='test-name' checked></code>."
"The <code>div</code> element, or \"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><div></code> and close it on another line with <code></div></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>.",
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
"assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
"assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
"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><div></code> öffnen und mit <code></div></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>."
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element."
"nameDe":"Waypoint: Gib dem Div Element einen farbigen Hintergrund",
"descriptionDe":[
"Erstelle eine Klasse namens \"gray-background\" mit der Hintergrund-Farbe grau. Füge diese Klasse deinem <code>div</code> Element hinzu.",
"Du kannst die Hintergrund-Farbe eines Elements mit der Eigenschaft \"background-color\" bestimmen.",
"Willst du den Hintergrund eines Elements zum Beispiel grün – \"green\" – einfärben, kannst du <code>.green-background { background-color: green; }</code> innerhalb deines <code>style</code> Elements verwenden."
"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.",
"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."
"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.",
"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."
"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> attributes.",
"Give the green box a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
"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."
"Give the green box a <code>margin</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"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> attributes."
],
"tests":[
"assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
"assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>margin</code>.')",
"assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>margin</code>.')",
"assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>margin</code>.')"
"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."
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, 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 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
"assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>padding</code>.')",
"assert($('.green-box').css('padding-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>padding</code>.')",
"assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>padding</code>.')",
"assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>padding</code>.')"
"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."
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, 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 an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
"assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
"assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>margin</code>.')",
"assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>margin</code>.')",
"assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>margin</code>.')"
"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."
"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 \"Hello World\".",
"Then, let's give all elements on your page the color of \"green\" 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 \"Monospace\" by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
"assert(($('body').css('color') === 'rgb(0, 128, 0)'), 'Give your <code>body</code> element the \"color\" attribute of green.')",
"assert(($('body').css('font-family').match(/Monospace/i)), 'Give your <code>body</code> element the \"font-family\" attribute of \"Monospace\".')",
"assert(($('h1').length > 0 && $('h1').css('font-family').match(/monospace/i)), 'Your <code>h1</code> element should inherit the font \"Monospace\" from your <code>body</code> element.')",
"assert(($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
"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."
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')",
"assert(editor.match(/#000000/g) && editor.match(/#000000/g).length > 0, 'Use hex code the color black instead of the word \"black\". For example <code>body: { color: #000000; }</code>.')"
"assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Your <code>body</code> element should have the background-color of white.')",
"assert(editor.match(/#FFFFFF/ig) && editor.match(/#FFFFFF/ig).length > 0, 'Use hex code the color white instead of the word \"white\". For example <code>body: { color: #FFFFFF; }</code>.')"
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use hex code the color red instead of the word \"red\". For example <code>body: { color: #FF0000; }</code>.')"
"assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your <code>body</code> element the background-color of green.')",
"assert(editor.match(/#00FF00/g) && editor.match(/#00FF00/g).length > 0, 'Use hex code the color green instead of the word \"green\". For example <code>body: { color: #00FF00; }</code>.')"
"assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your <code>body</code> element the background-color of blue.')",
"assert(editor.match(/#0000FF/g) && editor.match(/#0000FF/g).length > 0, 'Use hex code the color blue instead of the word \"blue\". For example <code>body: { color: #0000FF; }</code>.')"
"assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your <code>body</code> element the background-color of orange.')",
"assert(editor.match(/#FFA500/g) && editor.match(/#FFA500/g).length > 0, 'Use hex code the color orange instead of the word \"orange\". For example <code>body: { color: #FFA500; }</code>.')"
"assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your <code>body</code> element the background-color of gray.')",
"assert(editor.match(/#808080/g) && editor.match(/#808080/g).length > 0, 'Use hex code the color gray instead of the word \"gray\". For example <code>body: { color: #808080; }</code>.')"
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/#111111/g) && editor.match(/#111111/g).length > 0, 'Use hex code to make a light gray. For example <code>body: { color: #111111; }</code>.')"
"assert($('body').css('background-color') === 'rgb(255, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/#F00/ig) && editor.match(/#F00/ig).length > 0, 'Use abbreviated hex code instead of a named color. For example <code>body: { color: #F00; }</code>.')"
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed":[
"<style>",
" body {",
" background-color: #000;",
" }",
"</style>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"",
"descriptionEs":[],
"namePt":"",
"descriptionPt":[],
"nameDe":"",
"descriptionDe":[]
},
{
"id":"bad88fee1348bd9aedf08726",
"name":"Waypoint: Use RGB to Color Elements White",
"assert($('body').css('background-color') === 'rgb(255, 255, 255)', 'Give your <code>body</code> element the background-color of red.')",
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,255,255); }</code>.')"
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
"assert($('body').css('background-color') === 'rgb(0, 255, 0)', 'Give your <code>body</code> element the background-color of green.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(0,255,0); }</code>.')"
],
"challengeSeed":[
"<style>",
" body {",
" background-color: #FF0000;",
" }",
"</style>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"",
"descriptionEs":[],
"namePt":"",
"descriptionPt":[],
"nameDe":"",
"descriptionDe":[]
},
{
"id":"bad81fee1348bd9aedf08722",
"name":"Waypoint: Use RGB to Color Elements Blue",
"assert($('body').css('background-color') === 'rgb(0, 0, 255)', 'Give your <code>body</code> element the background-color of blue.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(0,0,255); }</code>.')"
],
"challengeSeed":[
"<style>",
" body {",
" background-color: #00FF00;",
" }",
"</style>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"",
"descriptionEs":[],
"namePt":"",
"descriptionPt":[],
"nameDe":"",
"descriptionDe":[]
},
{
"id":"bad82fee1348bd9aedf08721",
"name":"Waypoint: Use RGB to Mix Colors",
"dashedName":"waypoint-use-rgb-to-mix-colors",
"difficulty":0.068,
"description":[
"Use hex code instead of a orange."
],
"tests":[
"assert($('body').css('background-color') === 'rgb(255, 165, 0)', 'Give your <code>body</code> element the background-color of orange.')",
"assert(editor.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,165,0); }</code>.')"
],
"challengeSeed":[
"<style>",
" body {",
" background-color: #0000FF;",
" }",
"</style>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"",
"descriptionEs":[],
"namePt":"",
"descriptionPt":[],
"nameDe":"",
"descriptionDe":[]
},
{
"id":"bad83fee1348bd9aede08720",
"name":"Waypoint: Use RGB to Color Elements Gray",
"assert($('body').css('background-color') === 'rgb(128, 128, 128)', 'Give your <code>body</code> element the background-color of gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*128\\s*,\\s*128\\s*,\\s*128\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(128,128,128); }</code>.')"
],
"challengeSeed":[
"<style>",
" body {",
" background-color: FFA500;",
" }",
"</style>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"",
"descriptionEs":[],
"namePt":"",
"descriptionPt":[],
"nameDe":"",
"descriptionDe":[]
},
{
"id":"bad84fee1348bd9aedf08720",
"name":"Waypoint: Use RGB Alpha for Specific Shades of Gray",
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed":[
"<style>",
" body {",
" background-color: #808080;",
" }",
"</style>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"",
"descriptionEs":[],
"namePt":"",
"descriptionPt":[],
"nameDe":"",
"descriptionDe":[]
},
{
"id":"bad85fee1348bd9aedf08720",
"name":"Waypoint: Use RGB Alpha to Make an Element Translucent",
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
],
"challengeSeed":[
"<style>",
" body {",
" background-color: #808080;",
" }",
"</style>"
],
"challengeType":0,
"nameCn":"",
"descriptionCn":[],
"nameFr":"",
"descriptionFr":[],
"nameRu":"",
"descriptionRu":[],
"nameEs":"",
"descriptionEs":[],
"namePt":"",
"descriptionPt":[],
"nameDe":"",
"descriptionDe":[]
},
{
"id":"bad86fee1348bd9aedf08720",
"name":"Waypoint: Use RGB Alpha to make an Element Nearly Opaque",
"assert($('body').css('background-color') === 'rgb(17, 17, 17)', 'Give your <code>body</code> element the background-color of a light gray.')",
"assert(editor.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use RGB code instead of hex for the color red. For example <code>body: { color: rgb(255,0,0); }</code>.')"
