{
"name": "HTML5 and CSS",
"order": 0.002,
"challenges": [
{
"id": "bd7123c8c441eddfaeb5bdef",
"name": "Waypoint: Say Hello to HTML Elements",
"dashedName": "waypoint-say-hello-to-html-elements",
"difficulty": 0.001,
"description": [
"Welcome to Free Code Camp's first coding challenge! Click on the button below for further instructions.",
"Awesome. Now you can read the rest of this challenge's instructions.",
"You can edit code
in your text editor
, which we've embedded into this web page.",
"Do you see the code in your text editor that says <h1>Hello</h1>
? That's an HTML element
.",
"Most HTML elements have an opening tag
and a closing tag
. Opening tags look like this: <h1>
. Closing tags look like this: </h1>
. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.",
"Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
"To enable the \"Go to my next challenge\" button on this exercise, change your h1
tag's text to say \"Hello World\" instead of \"Hello\"."
],
"tests": [
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1
element should have the text \"Hello World\".')"
],
"challengeSeed": [
"
código
en tu editor de texto
, que hemos incrustado en esta página web.",
"¿Ves el código en tu editor de texto que dice <h1>Hello</h1>
? Ese es un elemento
HTML.",
"La mayoría de los elementos HTML tienen una etiqueta de apertura
y una etiqueta de cierre
. Las etiquetas de apertura se ven como: <h1>
. Las etiquetas de cierre se ven como: </h1>
. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).",
"Una vez que hayas completado cada desafío, y que hayas pasado todas sus pruebas, el botón \"Ir a mi siguiente desafío\" se activará. Haz click en él - o presiona control y enter al mismo tiempo - para avanzar al siguiente desafío.",
"Para activar el botón \"Ir a mi siguiente desafío\" de este ejercicio, cambia tu texto de la etiqueta h1
para que diga \"Hello World\" en lugar de \"Hello\"."
],
"namePt": "",
"descriptionPt": [],
"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 Text Editors
kannst du den Code
bearbeiten.",
"Siehst du den Code <h1>Hallo</h1>
im Editor? Das ist ein HTML Element
.",
"Die meisten HTML Elemente haben eine öffnende Auszeichnung (Tag)
und eine sich schließende
. Öffnende Tags sehen so aus: <h1>
. Schließende Tags so: </h1>
. Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags in dem Slash besteht, das bei schließenden Tags auf die sich öffnende spitze Klammer folgt.",
"Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.",
"Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1
Tags von \"Hello\" zu \"Hello World\"."
]
},
{
"id": "bad87fee1348bd9aedf0887a",
"name": "Waypoint: Headline with the h2 Element",
"dashedName": "waypoint-headline-with-the-h2-element",
"difficulty": 0.002,
"description": [
"Add an h2
tag that says \"CatPhotoApp\" to create a second HTML element
below your \"Hello World\" h1
element.",
"The h2
element you enter will create an h2
element on the website.",
"This element tells the browser how to render the text that it contains.",
"h2
elements are slightly smaller than h1
elements. There are also h3
, h4
, h5
and h6
elements."
],
"tests": [
"assert(($('h2').length > 0), 'Create an h2
element.')",
"assert(editor.match(/<\\/h2>/g) && editor.match(/<\\/h2>/g).length === editor.match(/h2
element has a closing tag.')",
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your h2
element should have the text \"CatPhotoApp\".')",
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1
element should have the text \"Hello World\".')"
],
"challengeSeed": [
"h2
que diga \"CatPhotoApp\" para crear un segundo elemento
HTML debajo de tu elemento h1
\"Hello World\".",
"El elemento h2 que ingreses creará un elemento h2 en el sitio web.",
"Este elemento le dice al navegador cómo mostrar el texto que contiene.",
"Los elementos h2
son ligeramente más pequeños que los elementos h1
. También hay elementos h3
, h4
, h5
y h6
."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Überschrift mit dem h2 Element",
"descriptionDe": [
"Füge unter h1
\"Hello World\" ein zweites HTML Element h2
hinzu, in dem \"CatPhotoApp\" steht.",
"Das eingetragene h2
Element wird ein h2
Element auf der Website erzeugen.",
"Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.",
"h2
Elemente sind ein wenig kleiner als h2
Elemente. Es gibt auch h3
, h4
, h5
und h6
Elemente."
]
},
{
"id": "bad87fee1348bd9aedf08801",
"name": "Waypoint: Inform with the Paragraph Element",
"dashedName": "waypoint-inform-with-the-paragraph-element",
"difficulty": 0.003,
"description": [
"Create a p
element below your h2
element, and give it the text \"Hello Paragraph\".",
"p
elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
"You can create a p
element like so: <p>I'm a p tag!</p>
."
],
"tests": [
"assert(($('p').length > 0), 'Create a p
element.')",
"assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your p
element should have the text \"Hello Paragraph\".')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/p element has a closing tag.')" ], "challengeSeed": [ "
<p>
, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre </p>
.",
"Los elementos párrafo son los principales elementos para los párrafos de texto en tamaño normal en sitios web.",
"Tú puedes crear un elemento párrafo como éste: <p>I'm a p tag!</p>
."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Informiere mit dem Paragraph Element",
"descriptionDe": [
"Erstelle ein p
Element unter deinem h2
Element und füge den Text \"Hello Paragraph\" ein.",
"p
Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".",
"Du kannst ein p
Element so erzeugen: <p>Ich bin ein p Element!</p>
"
]
},
{
"id": "bad87fee1348bd9aedf08802",
"name": "Waypoint: Uncomment HTML",
"dashedName": "waypoint-uncomment-html",
"difficulty": 0.005,
"description": [
"Uncomment your h1
, h2
and p
elements.",
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
"You can start a comment with <!--
and end a comment with -->
."
],
"tests": [
"assert($('h1').length > 0, 'Make your h1
element visible on your page by uncommenting it.')",
"assert($('h2').length > 0, 'Make your h2
element visible on your page by uncommenting it.')",
"assert($('p').length > 0, 'Make your p
element visible on your page by uncommenting it.')",
"assert(!new RegExp('-->', 'gi').test(editor), 'Be sure to delete all trailing comment tags, i.e. -->
.')"
],
"challengeSeed": [
""
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Quitar comentarios HTML",
"descriptionEs": [
"Quitar el comentario a los elementos h1
, h2
y p
.",
"Crear comentarios es una forma en la que puedes dejar mensajes dentro de tu código sin afectar el resultado.",
"Agregar comentarios es también una forma conveniente de desactivar tu código sin tener que borrarlo por completo.",
"Puedes comenzar un comentario con <!--
y terminar de comentar con -->
."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: HTML entkommentieren",
"descriptionDe": [
"Entkommentiere deine h1
, h2
und p
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 <!--
starten und ihn mit -->
wieder beenden."
]
},
{
"id": "bad87fee1348bd9aedf08804",
"name": "Waypoint: Comment out HTML",
"dashedName": "waypoint-comment-out-html",
"difficulty": 0.006,
"description": [
"Comment out your h1
element and your p
element, but leave your h2
element uncommented.",
"Remember that in order to start a comment, you need to use <!--
and to end a comment, you need to use -->
.",
"Here you'll need to end the comment before your h2
element begins."
],
"tests": [
"assert(($('h1').length === 0), 'Comment out your h1
element so that it is not visible on your page.')",
"assert(($('h2').length > 0), 'Leave your h2
element uncommented so that it is visible on your page.')",
"assert(($('p').length === 0), 'Comment out your p
element so that it is not visible on your page.')",
"assert(editor.match(/-->/g).length > 1, 'Be sure to close each of your comments with -->
.')"
],
"challengeSeed": [
""
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "Waypoint: Comenta en HTML",
"descriptionEs": [
"Comenta el elemento h1
y el elemento p
, pero deja sin comentar el elemento h2
.",
"Recuerda que para comenzar un comentario, necesitas usar <!--
y para terminar un comentario, necesitas usar -->
.",
"Aquí necesitarás terminar el comentario antes que comience el elemento h2."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: HTML auskommentieren",
"descriptionDe": [
"Kommentiere die Elemente h1
und p
aus, aber lasse dein h2
Element unkommentiert.",
"Denk daran, dass du einen Kommentar mit <!--
anfangen und mit -->
wieder beenden kannst.",
"Hier wirst du deinen Kommentar vor dem h2
Element beenden müssen."
]
},
{
"id": "bad87fee1348bd9aedf08833",
"name": "Waypoint: Fill in the Blank with Placeholder Text",
"dashedName": "waypoint-fill-in-the-blank-with-placeholder-text",
"difficulty": 0.007,
"description": [
"Replace the text inside your p
element with the first few words of the provided \"Kitty Ipsum\" text.",
"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\"!",
"Here are the first few words of \"Kitty Ipsum\" text, which you can copy and paste into the right position: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
"
],
"tests": [
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p
element should contain the first few words of the provided \"Kitty Ipsum\" text.')"
],
"challengeSeed": [
"Hello Paragraph
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "Waypoint: Llena espacios con texto de relleno", "descriptionEs": [ "Cambia el texto en el elementop
para usar las primeras palabras del texto Kitty Ipsum
.",
"Los desarrolladores web tradicionalmente usan Lorem Ipsum
como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.",
"El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.",
"Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado Kitty Ipsum!",
"Aquí están las primeras palabras del texto Kitty Ipsum, que puedes copiar y pegar en la posición correcta: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
"
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text",
"descriptionDe": [
"Ersetze den Text in deinem p
Element mit den ersten Wörtern des zur Verfügung gestellten \"Kitty Ipsum\" Textes.",
"Webentwickler nutzen für gewöhnlich \"Lorem Ipsum\" Text als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.",
"\"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: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
"
]
},
{
"id": "bad87fed1348bd9aedf08833",
"name": "Waypoint: Delete HTML Elements",
"dashedName": "waypoint-delete-html-elements",
"difficulty": 0.008,
"description": [
"Delete your h1
element so we can simplify our view.",
"Our phone doesn't have much vertical space.",
"Let's remove the unnecessary elements so we can start building our CatPhotoApp."
],
"tests": [
"assert(($('h1').length == 0), 'Delete your h1
element.')",
"assert(($('h2').length > 0), 'Leave your h2
element on the page.')",
"assert(($('p').length > 0), 'Leave your p
element on the page.')"
],
"challengeSeed": [
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "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." ], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Entferne HTML Elemente", "descriptionDe": [ "Lösche die Elementeh1
, 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",
"name": "Waypoint: Change the Color of Text",
"dashedName": "waypoint-change-the-color-of-text",
"difficulty": 0.009,
"description": [
"Change your h2
element's style so that its text color is red.",
"We can do this by changing the \"style\" of your h2
element.",
"The style that is responsible for the color of an element's text is the \"color\" style.",
"Here's how you would set your h2
element's text color to blue: <h2 style=\"color: blue\">CatPhotoApp</h2>
."
],
"tests": [
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2
element should be red.')"
],
"challengeSeed": [
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "Waypoint: Cambia el color del texto", "descriptionEs": [ "Cambia el estilo del elementoh2
de manera que el color de su texto sea rojo.",
"Podemos hacer esto por medio de cambiar el estilo
del elemento h2
.",
"El estilo responsable del color de texto de un elemento es el estilo \"color\".",
"Así es como podrías volver el color de texto de tu elemento h2
en azul: <h2 style=\"color: blue\">CatPhotoApp</h2>
."
],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Ändere die Farbe des Textes",
"descriptionDe": [
"Ändere den Style des h2
Elements, damit die Textfarbe Rot ist.",
"Wir können das bewerkstelligen, indem wir den \"style\" des h2
Elements ändern.",
"So könntest du die Textfarbe des h2
Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>
."
]
},
{
"id": "bad87fee1348bd9aedf08805",
"name": "Waypoint: Use CSS Selectors to Style Elements",
"dashedName": "waypoint-use-css-selectors-to-style-elements",
"difficulty": 0.010,
"description": [
"Delete your h2
element's style attribute and instead create a CSS style
element. Add the necessary CSS to turn all h2
elements blue.",
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
"When you entered <h2 style=\"color: red\">CatPhotoApp</h2>
, you were giving that individual h2
element an \"inline style\".",
"That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).",
"At the top of your code, create a style
element like this: <style></style>
.",
"Inside that style element, you can create a \"CSS selector\" for all h2
elements. For example, if you wanted all h2
elements to be red, your style element would look like this: <style>h2 {color: red;}</style>
.",
"Note that it's important to have both opening and closing curly braces ({
and }
) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles."
],
"tests": [
"assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your h2
element should be blue.')",
"assert(!$('h2').attr('style'), 'Remove the style attribute from your h2
element.')",
"assert(($('style').length > 1), 'Create a style
element.')",
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "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 deinemh2
Element hinzu.",
"Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.",
"So sieht eine CSS Klasse aus:",
"",
"Du siehst, dass wir die CSS Klasse \"blue-text\" innerhalb von <style>
geschrieben haben.",
"Du kannst eine Klasse folgendermaßen einem HTML Element beifügen: <h2 class=\"blue-text\">CatPhotoApp</h2>
.",
"Beachte, dass Klassen in deinem CSS style
Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.",
"Anstatt ein neues style
Element zu erstellen, versuche die h2
Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen."
]
},
{
"id": "bad87fee1348bd9aefe08806",
"name": "Waypoint: Style Multiple Elements with a CSS Class",
"dashedName": "waypoint-style-multiple-elements-with-a-css-class",
"difficulty": 0.012,
"description": [
"Apply the \"red-text\" class to your h2
and p
elements.",
"Remember that you can attach classes to HTML elements by using class=\"your-class-here\"
within the relevant element's opening tag.",
"Remember that CSS selectors require a period at the beginning like this: .blue-text { color: blue; }
, but that class declarations don't use a period, like this: <h2 class=\"blue-text\">CatPhotoApp<h2>
."
],
"tests": [
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2
element should be red.')",
"assert($('h2').hasClass('red-text'), 'Your h2
element should have the class \"red-text\".')",
"assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your p
element should be red.')",
"assert($('p').hasClass('red-text'), 'Your p
element should have the class \"red-text\".')"
],
"challengeSeed": [
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse", "descriptionDe": [ "Füge denh2
und p
Elementen die Klasse \"red-text\" hinzu.",
"Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\"
innerhalb des öffnenden Tags schreibst.",
"Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }
. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>
."
]
},
{
"id": "bad87fee1348bd9aedf08806",
"name": "Waypoint: Change the Font Size of an Element",
"dashedName": "waypoint-change-the-font-size-of-an-element",
"difficulty": 0.013,
"description": [
"Create a second p
element. Then, inside your <style>
element, set the \"font-size\" of all p
elements to 16 pixels.",
"Font size is controlled by the \"font-size\" CSS attribute, like this: h1 { font-size: 30px; }
.",
"First, create a second p
element with the following Kitty Ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
",
"See if you can figure out how to give both of your p
elements the font-size of 16 pixels (16px
). You can do this inside the same <style>
tag that we created for your \"red-text\" class."
],
"tests": [
"assert($('p').length > 1, 'You need 2 p
elements with Kitty Ipsum text.')",
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/p elements has a closing tag.')",
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($('p').text()), 'Your p
element should contain the first few words of the provided additional \"Kitty Ipsum\" text.')",
"assert($('p').css('font-size') === '16px', 'Give your p
elements the font-size of 16px.')"
],
"challengeSeed": [
"",
"",
"
Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Ändere die Schriftgröße eines Elements", "descriptionDe": [ "Erstelle ein zweitesp
Element. Ändere dann innerhalb deines <style>
Elements die Schriftgröße oder \"font-size\" von allen p
Elementen auf 16 Pixel.",
"Schriftgröße wird von dem CSS Attribut \"font-size\" kontrolliert: h1 { font-size: 30px; }
.",
"Zuerst erstellst du ein zweites p
Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
",
"Versuche nun beiden p
Elementen die Schriftgröße von 16 Pixeln (16px
) zu geben. Du kannst das innerhalb des selben <style>
Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben."
]
},
{
"id": "bad87fee1348bd9aede08807",
"name": "Waypoint: Set the Font Family of an Element",
"dashedName": "waypoint-set-the-font-family-of-an-element",
"difficulty": 0.014,
"description": [
"Make all of your p
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 h2
element's font to \"Sans-serif\", you would use the following CSS: h2 { font-family: Sans-serif; }
."
],
"tests": [
"assert($('p').css('font-family').match(/monospace/i), 'Your p
elements should use the font \"Monospace\".')"
],
"challengeSeed": [
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Definiere die Schriftart eines Elements", "descriptionDe": [ "Definiere für allep
Elemente die Schriftart \"Monospace\".",
"Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.",
"Wenn du zum Beispiel deinem h2
Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }
."
]
},
{
"id": "bad87fee1348bd9aedf08807",
"name": "Waypoint: Import a Google Font",
"dashedName": "waypoint-import-a-google-font",
"difficulty": 0.015,
"description": [
"Apply the font-family
of \"Lobster\" to your h2
element.",
"First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.",
"Copy the following code snippet and paste it into your code editor:",
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
.",
"Now you can set \"Lobster\" as a font-family attribute on your h2
element."
],
"tests": [
"assert(new RegExp('googleapis', 'gi').test(editor), 'Import the \"Lobster\" font.')",
"assert($('h2').css('font-family').match(/lobster/i), 'Your h2
element should use the font \"Lobster\".')",
"assert($('p').css('font-family').match(/monospace/i), 'Your p
element should still use the font \"Monospace\".')"
],
"challengeSeed": [
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Importiere eine Google Font", "descriptionDe": [ "Füge demh2
Element die Schriftart oder font-family
\"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 style
Element ein:",
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
.",
"Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2
Element hinzufügen."
]
},
{
"id": "bad87fee1348bd9aedf08808",
"name": "Waypoint: Specify How Fonts Should Degrade",
"dashedName": "waypoint-specify-how-fonts-should-degrade",
"difficulty": 0.016,
"description": [
"Make all your h2
elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.",
"You can leave \"Lobster\" your h2
element's font-family, and have it \"degrade\" to a different font 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: p { font-family: Helvetica, Sans-Serif; }
.",
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your h2
elements to use \"Lobster\" and degrade to \"Monospace\".",
"Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
],
"tests": [
"assert($('h2').css('font-family').match(/^\"?lobster/i), 'Your h2 element should use the font \"Lobster\".')",
"assert($('h2').css('font-family').match(/lobster\"?,monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')"
],
"challengeSeed": [
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten", "descriptionDe": [ "Füge allenh2
Elementen die Schriftart \"Lobster\" hinzu und definiere \"Monospace\" als Ersatzschrift, wenn \"Lobster\" nicht verfügbar ist.",
"Du kannst \"Lobster\" als Schriftart deines h2
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: p { font-family: Helvetica, Sans-Serif; }
.",
"Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2
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",
"name": "Waypoint: Add Images to your Website",
"dashedName": "waypoint-add-images-to-your-website",
"difficulty": 0.017,
"description": [
"Use an img
element to add the image http://bit.ly/fcc-kittens
to your website.",
"You can add images to your website by using the img
element, and point to an specific image's URL using the src
attribute.",
"An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>
. Note that in most cases, img
elements are self-closing.",
"Try it with this image: http://bit.ly/fcc-kittens
."
],
"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 src
attribute that points to the kitten image.')"
],
"challengeSeed": [
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge Bilder zu deiner Website hinzu", "descriptionDe": [ "Nutze einimg
Element um das Bild http://bit.ly/fcc-kittens
einzufügen.",
"Du kannst img
Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src
Attribut.",
"Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>
. Beachte, dass img
Elemente in den meisten Fällen selbstschließend sind.",
"Versuche es mit diesem Bild: http://bit.ly/fcc-kittens
."
]
},
{
"id": "bad87fee1348bd9acdf08812",
"name": "Waypoint: Size your Images",
"dashedName": "waypoint-size-your-images",
"difficulty": 0.018,
"description": [
"Create a class called smaller-image
and use it to resize the image so that it's only 100 pixels wide.",
"CSS has an attribute called width
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: <style> .larger-image { width: 500px; } </style>
."
],
"tests": [
"assert($('img').hasClass('smaller-image'), 'Your img
element should have the class \"smaller-image\".')",
"assert($('img').width() === 100, 'Your image should be 100 pixels wide.')"
],
"challengeSeed": [
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Skaliere deine Bilder", "descriptionDe": [ "Erstelle eine Klasse mit dem Namensmaller-image
und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
"Die Breite eines Elements wird mit dem CSS Attribut width
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: <style> .larger-image { width: 500px; } </style>
."
]
},
{
"id": "bad87fee1348bd9bedf08813",
"name": "Waypoint: Add Borders Around your Elements",
"dashedName": "waypoint-add-borders-around-your-elements",
"difficulty": 0.019,
"description": [
"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.",
"CSS borders have attributes like style, color and width.",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>
."
],
"tests": [
"assert($('img').hasClass('smaller-image'), 'Your img
element should have the class \"smaller-image\".')",
"assert($('img').hasClass('thick-green-border'), 'Your img
element should have the class \"thick-green-border\".')",
"assert($('img').hasClass('thick-green-border') && parseInt($('img').css('border-top-width')), 'Give your image a border width of 10px.')",
"assert(new RegExp('solid', 'gi').test(editor), 'Give your image a border style of \"solid\".')",
"assert($('img').css('border-left-color') === 'rgb(0, 128, 0)', 'The border around your img
element should be green.')"
],
"challengeSeed": [
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "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:<style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>
."
]
},
{
"id": "bad87fee1348bd9aedf08814",
"name": "Waypoint: Add Rounded Corners with a Border Radius",
"dashedName": "waypoint-add-rounded-corners-with-a-border-radius",
"difficulty": 0.020,
"description": [
"Give your cat photo a border-radius
of 10 pixels.",
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius
.",
"You can specify a border-radius
with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border
class and set it to 10 pixels."
],
"tests": [
"assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')",
"assert(parseInt($('img').css('border-top-left-radius')) > 8, 'Your image should have a border radius of 10 pixels')"
],
"challengeSeed": [
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu", "descriptionDe": [ "Gib deinem Katzenbild einenborder-radius
von 10 Pixeln.",
"Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius
abrunden.",
"Du kannst einen border-radius
mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border
Klasse hinzu und setze es auf 10 Pixel."
]
},
{
"id": "bad87fee1348bd9aedf08815",
"name": "Waypoint: Make Circular Images with a Border Radius",
"dashedName": "waypoint-make-circular-images-with-a-border-radius",
"difficulty": 0.021,
"description": [
"Give your cat photo a border-radius
of 50%.",
"In addition to pixels, you can also specify a border-radius
using a percentage."
],
"tests": [
"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.')"
],
"challengeSeed": [
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius", "descriptionDe": [ "Gib deinem Katzenfoto einenborder-radius
von 50 %.",
"Du kannst einem border-radius
neben Pixeln auch Prozentwerte zuweisen."
]
},
{
"id": "bad87fee1348bd9aedf08816",
"name": "Waypoint: Link to External Pages with Anchor Elements",
"dashedName": "waypoint-link-to-external-pages-with-anchor-elements",
"difficulty": 0.022,
"description": [
"Create an a
element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".",
"Here's a diagram of an a
element. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.",
"",
"Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>
."
],
"tests": [
"assert((/cat photos/gi).test($('a').text()), 'Your a
element should have the anchor text of \"cat photos\"')",
"assert(/http:\\/\\/catphotoapp\\.com/gi.test($('a').attr('href')), 'You need an a
element that links to http://catphotoapp.com.')",
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/a
element has a closing tag.')"
],
"challengeSeed": [
"",
"",
"",
"CatPhotoApp
",
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
",
"Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": [],
"nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
"descriptionDe": [
"Erstelle ein a
Element oder \"Anker Element\", das auf http://catphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.",
"So sieht ein a
Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
"",
"Hier ist ein Beispiel: <p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p>
."
]
},
{
"id": "bad87fee1348bd9aede08817",
"name": "Waypoint: Wrap an Anchor Element within a Paragraph",
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
"difficulty": 0.023,
"description": [
"Now wrap your a
element within a new p
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.",
"Again, here's a diagram of an a
element for your reference:",
"",
"Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>
."
],
"tests": [
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an a
element that links to \"catphotoapp.com\".')",
"assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your a
element should have the anchor text of \"cat photos\"')",
"assert($('p') && $('p').length > 2, 'Create a new p
element around your a
element. \"click here for\".')",
"assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your a
element should be wrapped within your new p
element.')",
"assert($('p').text().match(/click\\shere\\sfor/gi), 'Your p
element should have the text \"click here for\".')",
"assert(editor.match(/<\\/p>/g) && editor.match(//g).length === editor.match(/
p
elements has a closing tag.')",
"assert(editor.match(/<\\/a>/g) && editor.match(//g).length === editor.match(/a elements has a closing tag.')"
],
"challengeSeed": [
"",
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen", "descriptionDe":[ "Jetzt umschließe deina
Element mit einem p
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 a
Element: ",
"So könnte es aussehen: <p>Hier ist ein <a href='http://freecodecamp.com'> Link zum Free Code Camp</a> für dich zum Folgen.</p>
"
]
},
{
"id": "bad87fee1348bd9aedf08817",
"name": "Waypoint: Make Dead Links using the Hash Symbol",
"dashedName": "waypoint-make-dead-links-using-the-hash-symbol",
"difficulty": 0.024,
"description": [
"Use the hash symbol (#) to turn your a
element's link into a dead link.",
"Sometimes you want to add a
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 jQuery
, which we'll learn about later.",
"Replace your a
element's href
attribute with a hash symbol to turn it into a dead link."
],
"tests": [
"assert($('a').attr('href') === '#', 'Your anchor
element should be a dead link with a href
attribute set to \"#\".')"
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "", "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol", "descriptionDe": [ "Nutze das Hash Symbol (#) um deinea
Elemente zu toten Links zu machen.",
"Manchmal wirst du a
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 jQuery
verändern willst. Das werden wir noch behandeln.",
"Ersetze den Inhalt des href
Attributs deines a
Elements mit einem Hash Symbol um einen toten Link zu erzeugen."
]
},
{
"id": "bad87fee1348bd9aedf08820",
"name": "Waypoint: Turn an Image into a Link",
"dashedName": "waypoint-turn-an-image-into-a-link",
"difficulty": 0.025,
"description": [
"Wrap your img
element inside an a
element with a dead link.",
"You can make elements into links by wrapping them within an a
element.",
"Wrap your image within an a
element. Here's an example: <a href='#'><img src='http://bit.ly/fcc-kittens2'/></a>
.",
"Remember to use the hash symbol (#) as your a
element's href
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 a
element should be a dead link with a href
attribute set to \"#\".')",
"assert($('a').children('img').length > 0, 'Wrap your image element within an a
element.')",
"assert(editor.match(/<\\/a>/g) && editor.match(//g).length === editor.match(/a elements has a closing tag.')"
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "", "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Verlinke ein Bild", "descriptionDe": [ "Umschließe deinimg
Element mit einem a
Element als toten Link.",
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a
Element umschließt.",
"Umschließe nun dein Bild mit einem a
Element. Hier ist ein Beispiel: <a href='#'><img src='http://bit.ly/fcc-kittens2'/></a>
.",
"Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href
Attributs des a
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",
"name": "Waypoint: Add Alt Text to an Image for Accessibility",
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
"difficulty": 0.026,
"description": [
"Add an alt
attribute with the text \"A cute orange cat lying on its back\" to our cat photo.",
"alt
attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. alt
attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at alt
attributes.",
"In short, every image should have an alt
attribute!",
"alt
attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
"You can add an alt
attribute right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>
."
],
"tests": [
"assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt
attribute set to \"A cute orange cat lying on its back\".')"
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "", "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu", "descriptionDe": [ "Füge zu unserem Katzen-Bild einalt
Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu.",
"alt
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 alt
Attribut beinhalten!",
"alt
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 alt
Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>
."
]
},
{
"id": "bad87fee1348bd9aedf08827",
"name": "Waypoint: Create a Bulleted Unordered List",
"dashedName": "waypoint-create-a-bulleted-unordered-list",
"difficulty": 0.027,
"description": [
"Replace your p
elements with an unordered list of three things that cats love.",
"HTML has a special element for creating unordered lists, or bullet point-style lists.",
"Unordered lists start with a <ul>
element. Then they contain some number of <li>
elements.",
"For example: <ul><li>milk</li><li>cheese</li></ul>
would create a bulleted list of \"milk\" and \"cheese\"."
],
"tests": [
"assert($('ul').length > 0, 'Create a ul
element.')",
"assert($('li').length > 2, 'Add three li
elements to your ul
element.')",
"assert(editor.match(/<\\/ul>/g) && editor.match(/li
element has a closing tag.')"
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "", "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "challengeType": 0, "nameCn": "", "descriptionCn": [], "nameFr": "", "descriptionFr": [], "nameRu": "", "descriptionRu": [], "nameEs": "", "descriptionEs": [], "namePt": "", "descriptionPt": [], "nameDe": "Waypoint: Erstelle eine ungeordnete Liste", "descriptionDe": [ "Ersetze deinep
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 <ul>
Element. Dann beinhalten sie eine gewisse Anzahl an <li>
Elementen.",
"Als Beispiel: <ul><li>Milch</li><li>Käse</li></ul>
würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen."
]
},
{
"id": "bad87fee1348bd9aedf08828",
"name": "Waypoint: Create an Ordered List",
"dashedName": "waypoint-create-an-ordered-list",
"difficulty": 0.028,
"description": [
"Create an ordered list of the top 3 things cats hate the most.",
"HTML has a special element for creating ordered lists, or numbered-style lists.",
"Ordered lists start with a <ol>
element. Then they contain some number of <li>
elements.",
"For example: <ol><li>hydrogen</li><li>helium</li></ol>
would create a numbered list of \"hydrogen\" and \"helium\"."
],
"tests": [
"assert($('ul').length > 0, 'You should have an ul
element on your page.')",
"assert($('ol').length > 0, 'You should have an ol
element on your page.')",
"assert($('li').length > 5, 'You should have three li
elements within your ul
element.')",
"assert($('li').length > 5, 'You should have three li
elements within your ol
element.')",
"assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/ul
element has a closing tag.')",
"assert(editor.match(/<\\/ol>/g) && editor.match(/<\\/ol>/g).length === editor.match(/ol
element has a closing tag.')",
"assert(editor.match(/<\\/li>/g) && editor.match(/li
element has a closing tag.')"
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "", "", "Things cats love:
", "<ol>
Element. Dann enthalten sie eine gewisse Anzahl an <li>
Elementen.",
"Als beispiel: <ol><li>hydrogen</li><li>Helium</li></ol>
würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen."
]
},
{
"id": "bad87fee1348bd9aedf08829",
"name": "Waypoint: Create a Text Field",
"dashedName": "waypoint-create-a-text-field",
"difficulty": 0.029,
"description": [
"Now we'll create a web form. Create a text input under your lists.",
"Text inputs are a convenient way to get input from your user.",
"You can create one like this: <input type='text'>
. Note that input
elements are self-closing."
],
"tests": [
"assert($('input').length > 0, 'Your app should have a text field input element.')"
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "", "", "Things cats love:
", "Top 3 things cats hate:
", "<input type='text'>
. Beachte, dass input
Elemente selbstschließend sind."
]
},
{
"id": "bad87fee1348bd9aedf08830",
"name": "Waypoint: Add Placeholder Text to a Text Field",
"dashedName": "waypoint-add-placeholder-text-to-a-text-field",
"difficulty": 0.030,
"description": [
"Set the placeholder
value of your text input
to \"cat photo URL\".",
"Your placeholder text is what appears in your text input
before your user has inputed anything.",
"You can create placeholder text like so: <input type='text' placeholder='this is placeholder text'>
."
],
"tests": [
"assert($('input[placeholder]').length > 0, 'Add a placeholder
attribute text input
element.')",
"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\".')"
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "", "", "Things cats love:
", "Top 3 things cats hate:
", "input
Element den Wert für placeholder
auf \"cat photo URL\".",
"Platzhalter erscheinen in input
Feldern, bevor der Nutzer etwas eingibt.",
"Du kannst Platzhalter auf folgende Weise erstellen: <input type='text' placeholder='Das ist ein Platzhalter.'>
."
]
},
{
"id": "bad87fee1348bd9aede08830",
"name": "Waypoint: Create a Form Element",
"dashedName": "waypoint-create-a-form-element",
"difficulty": 0.031,
"description": [
"Wrap your text field in a form
element. Add the action=\"/submit-cat-photo\"
attribute to this form element.",
"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 form
element.",
"For example: <form action=\"/url-where-you-want-to-submit-form-data\"></form>
."
],
"tests": [
"assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a form
element.')",
"assert($('form').attr('action'), 'Your form
element should have an action
attribute.')",
"assert(editor.match(/<\\/form>/g) && editor.match(/