![\"Imagem](\"//i.imgur.com/jOc1JF1.png\" "\\"Clique")
código em seu editor de texto, que embutimos aqui nesta página da web.",
"Consegue ver o código que diz <h1>Hello</h1> no seu editor de texto? Esse é um elemento HTML.",
"A maioria dos elementos HTML tem uma tag de abertura e uma tag de fechamento.",
"As tags de abertura são assim: <h1>. E as tags de fechamento são assim: </h1>.",
"Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).",
"Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.",
"Para passar nos testes deste desafio, mude o texto do elemento h1 para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"."
],
"namePtBR": "Diga Olá aos Elementos HTML",
"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\"."
],
"title": "Say Hello to HTML Elements",
"description": [
"Welcome to Free Code Camp's first coding challenge.",
"You can edit code in your text editor, which we've embedded into this web page.",
"Do you see the code in your text editor that says <h1>Hello</h1>? That's an HTML element.",
"Most HTML elements have an opening tag and a closing tag.",
"Opening tags look like this:",
"<h1>",
"Closing tags look like this:",
"</h1>",
"Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
"Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing, you can advance to the next challenge.",
"To pass the test on this challenge, change your h1 element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button."
],
"challengeSeed": [
"h1 element should have the text \"Hello World\".');"
],
"type": "waypoint",
"titleEs": "Saluda a los Elementos HTML",
"descriptionEs": [
"¡Bienvenido/a al primer desafío de programación de Free Code Camp!",
"Puedes editar tu 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 (<).",
"Cada desafío tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Run tests\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafío.",
"Para pasar la prueba en este desafío, cambia tu texto de la etiqueta h1 para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"."
],
"titleDe": "Waypoint: Begrüße die HTML Elemente",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf0887a",
"descriptionPtBR": [
"Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:",
"",
"O elemento h2 que você criar gerará um elemento h2 na página da web.",
"Este elemento indica ao navegador a forma de mostrar o texto que contém.",
"Os elementos h2 são ligeiramente menores que os elementos h1. Há também os elementos h3, h4, h5 e h6.",
"Adicione uma tag h2 que diga \"CatPhotoApp\" para criar um segundo elemento HTML abaixo de seu elemento h1 chamado \"Hello World\"."
],
"namePtBR": "Cabeçalho com o Elemento h2",
"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."
],
"title": "Headline with the h2 Element",
"description": [
"Over the next few challenges, we'll build an HTML5 app that will look something like this:",
"",
"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.",
"Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element."
],
"challengeSeed": [
"h2 element.');",
"assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/h2 element has a closing tag.');",
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your h2 element should have the text \"CatPhotoApp\".');",
"assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your h1 element should have the text \"Hello World\".');"
],
"type": "waypoint",
"titleEs": "Encabezado con el elemento h2",
"descriptionEs": [
"Durante los siguientes desafíos, construiremos una aplicación HTML5 que lucirá como la siguiente:",
"",
"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",
"Agrega una etiqueta h2 que diga \"CatPhotoApp\" para crear un segundo elemento HTML debajo de tu elemento h1 \"Hello World\"."
],
"titleDe": "Waypoint: Überschrift mit dem h2 Element",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08801",
"descriptionPtBR": [
"Os elementos p são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".",
"Você pode criar um elemento p assim:",
"<p>Sou uma tag p!</p>",
"Crie um elemento p abaixo de seu elemento h2, e dê a ele o texto \"Hello Paragraph\"."
],
"namePtBR": "Informe com o Elemento Parágrafo",
"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>"
],
"title": "Inform with the Paragraph Element",
"description": [
"p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
"You can create a p element like this:",
"<p>I'm a p tag!</p>",
"Create a p element below your h2 element, and give it the text \"Hello Paragraph\"."
],
"challengeSeed": [
"p element.');",
"assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your p element should have the text \"Hello Paragraph\".');",
"assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/p element has a closing tag.');"
],
"type": "waypoint",
"titleEs": "Informa con el Elemento Párrafo",
"descriptionEs": [
"Los elementos p son los elementos preferidos en los sitios web para los párrafos de texto en tamaño normal. La P es abreviatura de \"párrafo\".",
"Tú puedes crear un elemento párrafo de esta forma:",
"<p>¡Soy una etiqueta p!</p>",
"Crea un elemento p debajo de tu elemento h2, y ponle el texto \"Hello Paragraph\"."
],
"titleDe": "Waypoint: Informiere mit dem Paragraph Element",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08802",
"descriptionPtBR": [
"\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.",
"Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.",
"Você pode iniciar um comentário com <!-- e terminar seu comentário com -->.",
"Remova o comentário dos elementos h1, h2 e p."
],
"namePtBR": "Descomente o HTML",
"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."
],
"title": "Uncomment HTML",
"description": [
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
"You can start a comment with <!-- and end a comment with -->",
"Uncomment your h1, h2 and p elements."
],
"challengeSeed": [
""
],
"tests": [
"assert($(\"h1\").length > 0, 'message: Make your h1 element visible on your page by uncommenting it.');",
"assert($(\"h2\").length > 0, 'message: Make your h2 element visible on your page by uncommenting it.');",
"assert($(\"p\").length > 0, 'message: Make your p element visible on your page by uncommenting it.');",
"assert(!/-->/gi.test(code), 'message: Be sure to delete all trailing comment tags, i.e. -->.');"
],
"type": "waypoint",
"titleEs": "Quita comentarios HTML",
"descriptionEs": [
"\"Comentar\" es una manera en la que puedes dejar anotaciones en tu código sin afectar el código mismo.",
"Comentar también es una forma conveniente de desactivar código sin tener que borrarlo por completo.",
"Puedes comenzar un comentario con <!-- y terminar de comentar con -->",
"Quita el comentario a los elementos h1, h2 y p"
],
"titleDe": "Waypoint: HTML entkommentieren",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08804",
"descriptionPtBR": [
"Lembre-se que para iniciar um comentário você precisa utilizar <!--, e para terminar um comentário é necessário usar -->.",
"Aqui, você deverá terminar o comentário antes que seu elemento h2 inicie.",
"Comente o elemento h1 e o elemento p, e deixe o elemento h2 sem nenhum comentário."
],
"namePtBR": "Comente o HTML",
"descriptionDe": [
"Kommentiere die Elemente h1 und p aus, aber lasse dein h2 Element unkommentiert.",
"Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.",
"Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen."
],
"title": "Comment out HTML",
"description": [
"Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->",
"Here you'll need to end the comment before your h2 element begins.",
"Comment out your h1 element and your p element, but leave your h2 element uncommented."
],
"challengeSeed": [
""
],
"tests": [
"assert(($(\"h1\").length === 0), 'message: Comment out your h1 element so that it is not visible on your page.');",
"assert(($(\"h2\").length > 0), 'message: Leave your h2 element uncommented so that it is visible on your page.');",
"assert(($(\"p\").length === 0), 'message: Comment out your p element so that it is not visible on your page.');",
"assert(code.match(/-->/g).length > 1, 'message: Be sure to close each of your comments with -->.');"
],
"type": "waypoint",
"titleEs": "Comenta en HTML",
"descriptionEs": [
"Recuerda que para comenzar un comentario, necesitas usar <!-- y para terminar un comentario, necesitas usar -->",
"Aquí necesitarás terminar el comentario antes que comience el elemento h2.",
"Comenta el elemento h1 y el elemento p, pero deja sin comentar el elemento h2"
],
"titleDe": "Waypoint: HTML auskommentieren",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08833",
"descriptionPtBR": [
"Desenvolvedores web tradicionalmente usam Lorem Ipsum como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.",
"O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.",
"Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado Kitty Ipsum.",
"Substitua o texto dentro do seu elemento p pelas primeiras palavras deste texto Kitty Ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff."
],
"namePtBR": "Preencha Espaços com Texto de Espaço Reservado",
"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."
],
"title": "Fill in the Blank with Placeholder Text",
"description": [
"Web developers traditionally use lorem ipsum text as placeholder text. It's called lorem ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
"Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text.",
"Replace the text inside your p element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff."
],
"challengeSeed": [
"
Hello Paragraph
" ], "tests": [ "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Yourp element should contain the first few words of the provided kitty ipsum text.');"
],
"type": "waypoint",
"titleEs": "Llena espacios con texto de relleno",
"descriptionEs": [
"Los desarrolladores web tradicionalmente usan Lorem Ipsum como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.",
"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 un texto llamado Kitty Ipsum!",
"Reemplaza el texto dentro de tu elemento p con las primeras palabras de este texto kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff."
],
"titleDe": "Waypoint: Fülle die Lücken mit Platzhalter-Text",
"challengeType": 0
},
{
"id": "bad87fed1348bd9aedf08833",
"descriptionPtBR": [
"Nosso celular não possui muito espaço vertical.",
"Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.",
"Apague o elemento h1 para simplificar o nosso espaço."
],
"namePtBR": "Apague Elementos HTML",
"descriptionDe": [
"Lösche die Elemente h1, 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."
],
"title": "Delete HTML Elements",
"description": [
"Our phone doesn't have much vertical space.",
"Let's remove the unnecessary elements so we can start building our CatPhotoApp.",
"Delete your h1 element so we can simplify our view."
],
"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.
" ], "tests": [ "assert(($(\"h1\").length == 0), 'message: Delete yourh1 element.');",
"assert(($(\"h2\").length > 0), 'message: Leave your h2 element on the page.');",
"assert(($(\"p\").length > 0), 'message: Leave your p element on the page.');"
],
"type": "waypoint",
"titleEs": "Borra elementos HTML",
"descriptionEs": [
"Nuestro teléfono no tiene mucho espacio vertical.",
"Eliminemos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp.",
"Borra el elemento h1 para simplificar nuestra vista."
],
"titleDe": "Waypoint: Entferne HTML Elemente",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08803",
"descriptionPtBR": [
"Agora vamos substituir a cor de parte do nosso texto.",
"Podemos fazer isso mudando o style do elemento h2.",
"A propriedade de estilo responsável pela cor do texto se chama \"color\".",
"Você pode mudar a cor do texto de seu elemento h2 para azul assim:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"Mude o estilo do elemento h2 para que seu texto fique com a cor vermelha."
],
"namePtBR": "Substitua a Cor do Texto",
"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>"
],
"title": "Change the Color of Text",
"description": [
"Now let's change the color of some of our text.",
"We can do this by changing the style of your h2 element.",
"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>",
"Change your h2 element's style so that its text color is 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.
" ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Yourh2 element should be red.');"
],
"type": "waypoint",
"titleEs": "Cambia el color del texto",
"descriptionEs": [
"Ahora cambiemos el color de parte de nuestro texto.",
"Podemos hacer esto cambiando el style del elemento h2",
"La propiedad de estilo responsable del color de texto es \"color\".",
"Así es como podrías poner en azul el color de texto de tu elemento h2:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"Cambia el estilo del elemento h2 de manera que el color de su texto sea rojo."
],
"titleDe": "Waypoint: Ändere die Farbe des Textes",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08805",
"descriptionPtBR": [
"Com o CSS, existem centenas de propriedades que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.",
"Quando você usou o <h2 style=\"color: red\">CatPhotoApp<h2>, você deu ao elemento h2 um estilo inline.",
"Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar Folhas de Estilo em Cascata (Cascading Style Sheets, CSS).",
"Acima de seu código, crie um elemento style como esse: <style></style>",
"Dentro do elemento style, é possível criar um seletor CSS para todos os elementos h2. Por exemplo, se você quiser que todos os elementos h2 tenham a cor vermelha, seu elemento style será assim:",
"<style>",
" h2 {color: red;}",
"</style>",
"Observe que é importante utilizar as chaves de abertura e de fechamento ({ e }) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.",
"Apague o atributo style de seu elemento h2 e então crie um elemento style CSS. Adicione o CSS necessário para fazer com que todos os elementos h2 tenham a cor azul."
],
"namePtBR": "Use Seletores CSS para Estilizar Elementos",
"descriptionDe": [
"Lösche das Style Attribute deines h2 Elements und erstelle stattdessen ein CSS style Element. Füge das notwendige CSS hinzu, um alle h2 Elemente Blau zu färben.",
"CSS liefert dir hunderte Attribute oder \"attributes\" um HTML Elemente auf deiner Seite zu gestalten.",
"Mit <h2 style=\"color: red\">CatPhotoApp</h2> hast du dem einzelnen h2 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 style Element: <style></style>",
"Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente Rot färben willst, schreibst du: <style>h2 {color: red;}</style>",
"Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) 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."
],
"title": "Use CSS Selectors to Style Elements",
"description": [
"With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.",
"When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were giving that individual h2 element an inline style.",
"That's one way to add style to an element, but a better way is by using CSS, which stands for Cascading Style Sheets.",
"At the top of your code, create a style element like this:",
"<style>", "Inside that style element, you can create a
</style>
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>", "Note that it's important to have both opening and closing curly braces (
h2 {color: red;}
</style>
{ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.",
"Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue."
],
"challengeSeed": [
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "tests": [ "assert(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from yourh2 element.');",
"assert($(\"style\") && $(\"style\").length > 1, 'message: Create a style element.');",
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your h2 element should be blue.');",
"assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.');",
"assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/style elements are valid and have a closing tag.');"
],
"type": "waypoint",
"titleEs": "Usa selectores CSS para dar estilo a los elementos",
"descriptionEs": [
"Con CSS, hay cientos de propiedades CSS que puedes usar para cambiar como un elemento se ve en una página web.",
"Cuando ingresaste <h2 style=\"color: red\">CatPhotoApp<h2>, le estuviste dando al elemento h2 un estilo en línea",
"Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando Hojas de Estilo en Cascada (Cascading Style Sheets, CSS).",
"Al principio de tu código, crea un elemento style como este:",
"<style>", "Dentro de ese elemento style, puedes crear un
</style>
selector CSS para todos los elementos h2. Por ejemplo, si quisieras que todos los elementos h2 fueran rojos, tu elemento style se vería así:",
"<style>", "Fíjate que es importante tener llaves de apertura y de cierre (
h2 {color: red;}
</style>
{ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento esté entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento.",
"Borra el atributo style de tu elemento h2 y a cambio escribe un elemento style CSS. Agrega el CSS necesario para hacer todos los elementos h2 de color azul."
],
"titleDe": "Waypoint: Nutze CSS Selektoren um Elemente zu gestalten",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aecf08806",
"descriptionPtBR": [
"As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.",
"Aqui está um exemplo de como declarar uma classe com CSS:",
"<style>",
" .blue-text {",
" color: blue;",
" }",
"</style>",
"Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <style>.",
"Você pode aplicar uma classe a um elemento HTML assim:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Note que em seu elemento style CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.",
"Ao invés de criar um novo elemento style, tente eliminar a declaração de estilo de h2 dos elementos de estilo existentes, e troque ela pela declaração de classe .red-text.",
"Crie uma classe CSS chamada red-text e então a aplique em seu elemento h2."
],
"namePtBR": "Use Classes CSS para Estilizar Elementos",
"descriptionDe": [
"Erstelle eine CSS Klasse namens \"red-text\" und füge sie zu deinem h2 Element hinzu.",
"Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.",
"So sieht eine CSS Klasse aus:",
"![\"Ein](\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\")
",
"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."
],
"title": "Use a CSS Class to Style an Element",
"description": [
"Classes are reusable styles that can be added to HTML elements.",
"Here's an example CSS class declaration:",
"<style>", "You can see that we've created a CSS class called
.blue-text {
color: blue;
}
</style>
blue-text within the <style> tag.",
"You can apply a class to an HTML element like this:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
"Inside your style element, change the h2 selector to .red-text and update the color's value from blue to red.",
"Give your h2 element the class attribute with a value of 'red-text'."
],
"challengeSeed": [
"",
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Yourh2 element should be red.');",
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');",
"assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a red-text class and have its color set to red.');",
"assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like style=\"color: red\" in your h2 element.');"
],
"type": "waypoint",
"titleEs": "Utiliza una clase CSS para darle estilo a un elemento",
"descriptionEs": [
"Las clases son estilos reutilizables que pueden añadirse a elementos HTML.",
"Aquí esta un ejemplo de una declaración de una clase CSS:",
"<style>", "Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta
.blue-text {
color: blue;
}
</style>
<style>",
"Puedes aplicar una clase a un elemento HTML de esta manera:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Nota que en tu elemento style CSS, las clases deben comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deben comenzar con punto. ",
"Dentro de tu elemento style, cambia el selector h2 por .red-text y cambia el valor del color de blue a red.",
"Dale a tu elemento h2 el atributo class con el valor de 'red-text'."
],
"titleDe": "Waypoint: Nutze eine CSS Klasse um ein Element zu gestalten",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aefe08806",
"descriptionPtBR": [
"Lembre-se que é possível adicionar classes a elementos HTML ao utilizar class=\"sua-classe-aqui\" dentro da tag de abertura do elemento.",
"Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:",
".blue-text {",
" color: blue;",
"}",
"Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:",
"<h2 class=\"blue-text\">CatPhotoApp<h2>",
"Adicione a classe red-text aos seus elementos h2 e p."
],
"namePtBR": "Estilize Múltiplos Elementos com uma Classe CSS",
"descriptionDe": [
"Füge den h2 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>"
],
"title": "Style Multiple Elements with a CSS Class",
"description": [
"Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.",
"Remember that CSS class selectors require a period at the beginning like this:",
".blue-text {", "But also remember that class declarations don't use a period, like this:", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Apply the red-text class to your h2 and p elements."
],
"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.
" ], "tests": [ "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Yourh2 element should be red.');",
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your h2 element should have the class red-text.');",
"assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your p element should be red.');",
"assert($(\"p\").hasClass(\"red-text\"), 'message: Your p element should have the class red-text.');"
],
"type": "waypoint",
"titleEs": "Da estilo a múltiples elementos con una clase CSS",
"descriptionEs": [
"Recuerda que puedes adjuntar clases a elementos HTML utilizando class=\"tu-clase-aqui\" dentro de la etiqueta de apertura del elemento mismo.",
"Recuerda que los selectores de clase CSS requieren un punto al principio, así:",
".blue-text {", "Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp<h2>",
"Aplica la clase red-text a tus elementos h2 y p"
],
"titleDe": "Waypoint: Gestalte mehrere Elemente mit einer CSS Klasse",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08806",
"descriptionPtBR": [
"O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:",
"h1 {",
" font-size: 30px;",
"}",
"Crie um segundo elemento p que tenha o seguinte texto Kitty Ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.",
"Dentro da mesma tag <style> que criamos para sua classe red-text, modifique o font-size dos elementos p para que tenha um tamanho de 16 pixels (16px)."
],
"namePtBR": "Mude o Tamanho da Fonte de um Elemento",
"descriptionDe": [
"Erstelle ein zweites p 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."
],
"title": "Change the Font Size of an Element",
"description": [
"Font size is controlled by the font-size CSS property, like this:",
"h1 {", "Create a second
font-size: 30px;
}
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.",
"Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).",
"Notep element."
],
"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.
" ], "tests": [ "assert($(\"p\").length > 1, 'message: You need 2p elements with Kitty Ipsum text.');",
"assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/p elements has a closing tag.');",
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your p element should contain the first few words of the provided additional kitty ipsum text.');",
"assert($(\"p:not([class])\").length === 1, 'message: Do not add a class attribute to the second p element, without removing it from the first one.');",
"assert(parseInt($(\"p:not([class])\").css(\"font-size\"), 10) > 15, 'message: Give elements with the p tag a font-size of 16px. Browser and Text zoom should be at 100%.');"
],
"type": "waypoint",
"titleEs": "Cambia el tamaño de fuente de un elemento.",
"descriptionEs": [
"El tamaño de fuente es controlado por la propiedad CSS \"font-size\", como aquí:",
"
h1 {", "Crea un segundo elemento
font-size: 30px;
}
p con el siguiente texto kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.",
"Dentro de la misma etiqueta <style> que creamos para tu clase red-text, pon el font-size de los elementos p a 16 pixeles (16px).",
"Notap."
],
"titleDe": "Waypoint: Ändere die Schriftgröße eines Elements",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aede08807",
"descriptionPtBR": [
"Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade font-family.",
"Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento h2 como Sans-serif, você poderá utilizar o seguinte código em CSS:",
"h2 {",
" font-family: Sans-serif;",
"}",
"Faça com que todos os elementos p utilizem o estilo de fonte Monospace."
],
"namePtBR": "Defina a Fonte para um Elemento",
"descriptionDe": [
"Definiere für alle p 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; }"
],
"title": "Set the Font Family of an Element",
"description": [
"You can set an element's font by using the font-family property.",
"For example, if you wanted to set your h2 element's font to Sans-serif, you would use the following CSS:",
"h2 {", "Make all of your
font-family: Sans-serif;
}
p elements use the Monospace font."
],
"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.
" ], "tests": [ "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'message: Yourp elements should use the font Monospace.');"
],
"type": "waypoint",
"titleEs": "Establecer la familia del tipo de letra de un elemento",
"descriptionEs": [
"Puedes establecer el tipo de letra de un elemento usando la propiedad font-family.",
"Por ejemplo, si quieres establecer el tipo de letra de tu elemento h2 como Sans-serif, usa el siguiente CSS:",
"h2 {", "Haz que todos tus elementos
font-family: Sans-serif;
}
p utilicen el tipo de letra Monospace."
],
"titleDe": "Waypoint: Definiere die Schriftart eines Elements",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08807",
"descriptionPtBR": [
"Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.",
"Primeiro, faça um chamado ao Google Fonts para poder utilizar a fonte chamada Lobster e carregá-la em seu HTML.",
"Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Agora, estableça Lobster como o valor para font-family em seu elemento h2."
],
"namePtBR": "Importe uma Fonte a Partir do Google Fonts",
"descriptionDe": [
"Füge dem h2 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=\"https://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."
],
"title": "Import a Google Font",
"description": [
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
"First, you'll need to make a call to Google to grab the Lobster font and load it into your HTML.",
"Copy the following code snippet and paste it into the top of your code editor:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Now you can set Lobster as a font-family value on your h2 element.",
"Apply the font-family of Lobster to your h2 element."
],
"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.
" ], "tests": [ "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'message: Import theLobster font.');",
"assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your h2 element should use the font Lobster.');",
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your p element should still use the font Monospace.');"
],
"type": "waypoint",
"titleEs": "Importar un tipo de letra de Google",
"descriptionEs": [
"Ahora, importemos y apliquemos un tipo de letra de Google (ten en cuenta que si Google está bloqueado en tu país, deberás saltarte este desafío).",
"Primero, haz un llamado a Google para obtener el tipo de letra Lobster y para cargarlo en tu HTML.",
"Copia la siguiente porción de código y pégala en la parte superior de tu editor de texto:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Ahora puedes establecer Lobster como valor de font-family de tu elemento h2.",
"Aplica el tipo de letra (font-family) Lobster a tu elemento h2."
],
"titleDe": "Waypoint: Importiere eine Google Font",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08808",
"descriptionPtBR": [
"Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo Monospace, Serif e Sans-Serif.",
"No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.",
"Por exemplo, se você deseja que um elemento use a fonte Helvetica, e que degrade para a fonte Sans-Serif quando a Helvetica não estiver disponível, você pode utilizar o seguinte CSS:",
"p {",
" font-family: Helvetica, Sans-Serif;",
"}",
"Agora, comente o seu chamado para a fonte do Google, para que a fonte Lobster não esteja disponível. Note como a fonte degrada para Monospace."
],
"namePtBR": "Especifique como as Fontes Devem se Degradar",
"descriptionDe": [
"Füge allen h2 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."
],
"title": "Specify How Fonts Should Degrade",
"description": [
"There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif",
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
"For example, if you wanted an element to use the Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:",
"p {", "Now comment out your call to Google Fonts, so that the
font-family: Helvetica, Sans-Serif;
}
Lobster font isn't available. Notice how it degrades to the Monospace font."
],
"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.
" ], "tests": [ "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'message: Your h2 element should use the fontLobster.');",
"assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'message: Your h2 element should degrade to the font Monospace when Lobster is not available.');",
"assert(new RegExp(\"\", \"gi\").test(code), 'message: Be sure to close your comment by adding -->.');"
],
"type": "waypoint",
"titleEs": "Especifica cómo deben degradarse los tipos de letra",
"descriptionEs": [
"Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyen Monospace, Serif y Sans-Serif",
"Cuando un tipo de letra no está disponible, puedes decirle al navegador que \"degrade\" a otro tipo de letra.",
"Por ejemplo, si quieres que un elemento use el tipo Helvetica, o que se degrade a Sans-Serif cuando Helvetica no esté disponible, puedes usar el siguiente estilo CSS:",
"p {", "Ahora pon en forma de comentario tu llamada a tipos de letra de Google, de forma que el tipo
font-family: Helvetica, Sans-Serif;
}
Lobster no esté disponible. Nota cómo se degrada al tipo Monospace."
],
"titleDe": "Waypoint: Spezifiziere die Rangfolge von Schriftarten",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08812",
"descriptionPtBR": [
"Você pode adicionar imagens à sua página da internet com o uso do elemento img, e apontar para a URL específica de uma imagem utilizando o atributo src.",
"Um exemplo para isso seria:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">",
"Observe que na maior parte dos casos, os elementos img são de fechamento automático.",
"Agora, tente fazer isso com essa imagem:",
"https://bit.ly/fcc-relaxing-cat"
],
"namePtBR": "Adicione Imagens em sua Página Web",
"descriptionDe": [
"Nutze ein img Element um das Bild https://bit.ly/fcc-relaxing-cat 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: https://bit.ly/fcc-relaxing-cat"
],
"title": "Add Images to your Website",
"description": [
"You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.",
"An example of this would be:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">",
"Note that in most cases, img elements are self-closing.",
"Try it with this image:",
"https://bit.ly/fcc-relaxing-cat"
],
"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.
" ], "tests": [ "assert($(\"img\").length > 0, 'message: Your page should have an image element.');", "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have asrc attribute that points to the kitten image.');"
],
"type": "waypoint",
"titleEs": "Añade imágenes a tu sitio web",
"descriptionEs": [
"Puedes agregar imágenes a tu sitio web mediante el uso del elemento img, y apuntar a la URL específica de una imagen utilizando el atributo src.",
"Un ejemplo de esto sería:",
"<img src=\"https://www.origen-de-tu-imagen.com/tu-imagen.jpg\">",
"Ten en cuenta que en la mayoría de los casos, los elementos img son de cierre automático.",
"Prueba con esta imagen:",
"https://bit.ly/fcc-relaxing-cat"
],
"titleDe": "Waypoint: Füge Bilder zu deiner Website hinzu",
"challengeType": 0
},
{
"id": "bad87fee1348bd9acdf08812",
"descriptionPtBR": [
"O CSS possui uma propriedade chamada width, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar px (pixels) como medida para especificar a largura de nossa imagem.",
"Por exemplo, se queremos criar uma classe CSS chamada larger-image que dê aos elementos HTML uma largura de 500px, vamos usar:",
"<estilo>",
" .larger-image{",
" width: 500px;",
" }",
"</style>",
"Crie uma classe chamada smaller-image e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
],
"namePtBR": "Dê um Tamanho para suas Imagens",
"descriptionDe": [
"Erstelle eine Klasse mit dem Namen smaller-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>"
],
"title": "Size your Images",
"description": [
"CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) 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>", "Create a class called
.larger-image {
width: 500px;
}
</style>
smaller-image and use it to resize the image so that it's only 100 pixels wide.",
"NoteKitty 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.
" ], "tests": [ "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Yourimg element should have the class smaller-image.');",
"assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
],
"type": "waypoint",
"titleEs": "Da tamaño a tus imágenes",
"descriptionEs": [
"CSS tiene una propiedad llamada width que controla el ancho de un elemento. Al igual que con las fuentes de letra, usaremos px (píxeles) para especificar el ancho de la imagen. ",
"Por ejemplo, si queremos crear una clase CSS llamada larger-image que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:",
"<style>", "Crea una clase llamada
.larger-image {
width: 500px;
}
</style>
smaller-image y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.",
"Notastyle, color e width",
"Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:",
"<style>",
" .thin-red-border {",
" border-color: red;",
" border-width: 5px;",
" border-style: solid;",
" }",
"</style>",
"Crie uma classe chamada thick-green-border que insira uma borda verde de 10 pixels de largura com um estilo solid ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.",
"Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo class. Por exemplo:",
"<img class=\"clase1 clase2\">"
],
"namePtBR": "Adicione Bordas ao Redor de seus Elementos",
"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>"
],
"title": "Add Borders Around your Elements",
"description": [
"CSS borders have properties 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>", "Create a class called
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
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.",
"Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:",
"<img class=\"class1 class2\">"
],
"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.
" ], "tests": [ "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Yourimg element should have the class smaller-image.');",
"assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your img element should have the class thick-green-border.');",
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of 10px.');",
"assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of solid.');",
"assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your img element should be green.');"
],
"type": "waypoint",
"titleEs": "Añade bordes alrededor de tus elementos",
"descriptionEs": [
"Los bordes CSS tienen propiedades como style, color y width",
"Por ejemplo, si queremos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos utilizar esta clase:",
"<style>", "Crea una clase llamada
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
thick-green-border que ponga un borde verde de 10 píxeles de ancho con un estilo solid en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ",
"Recuerda que puedes aplicar clases múltiples a un elemento separando cada clase con un espacio dentro del atributo class. Por ejemplo:",
"<img class=\"clase1 clase2\">"
],
"titleDe": "Waypoint: Füge Rahmen zu deinen Elementen hinzu",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08814",
"descriptionPtBR": [
"Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado border-radius.",
"Você pode especificar um border-radius com pixels. Adicione um border-radius de 10px para a sua foto.",
"Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o border-radius tanto para a classe .thick-green-border como para a classe .smaller-image."
],
"namePtBR": "Insira Bordas Arredondadas com o Border Radius",
"descriptionDe": [
"Gib deinem Katzenbild einen border-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."
],
"title": "Add Rounded Corners with a Border Radius",
"description": [
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.",
"You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.",
"Note: this waypoint allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or .smaller-image class."
],
"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.
" ], "tests": [ "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');", "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of10px');"
],
"type": "waypoint",
"titleEs": "Agrega esquinas redondeadas usando Border Radius",
"descriptionEs": [
"Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada border-radius.",
"Puedes especificar border-radius usando pixeles. Dale a tu foto del gato un border-radius de 10px.",
"Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar border-radius ya sea a la clase .thick-green-border o a la clase .smaller-image."
],
"titleDe": "Waypoint: Füge abgerundete Ecken mit Border Radius hinzu",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08815",
"descriptionPtBR": [
"Assim como pixels, você também pode usar o border-radius com porcentagens.",
"Dê para a sua foto de gato um border-radius de 50%."
],
"namePtBR": "Deixe as Imagens Circulares com o Border Radius",
"descriptionDe": [
"Gib deinem Katzenfoto einen border-radius von 50 %.",
"Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen."
],
"title": "Make Circular Images with a Border Radius",
"description": [
"In addition to pixels, you can also specify a border-radius using a percentage.",
"Give your cat photo a border-radius of 50%."
],
"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.
" ], "tests": [ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of50%, making it perfectly circular.');",
"assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');"
],
"type": "waypoint",
"titleEs": "Crea imágenes circulares usando Border Radius",
"descriptionEs": [
"Además de pixeles, puedes especificar un border-radius usando porcentajes.",
"Dale a tu foto del gato un border-radius de 50%."
],
"titleDe": "Waypoint: Erstelle runde Bilder mit einem Border Radius",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08816",
"descriptionPtBR": [
"Os elementos a, também conhecidos como elementos âncora, são utilizados para ligar conteúdo fora da página atual.",
"Aqui está um diagrama de um elemento a. Neste caso, o elemento a é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.",
" ![\"diagrama](\"//i.imgur.com/hviuZwe.png\" "\\"Clique")
",
"Veja um exemplo:",
"<p>Aqui está um <a href=\"https://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>",
"Crie um elemento a que esteja ligado ao site http://freecatphotoapp.com e tenha como texto de âncora \"fotos de gatos\"."
],
"namePtBR": "Ligue Páginas Externas com o Elemento Âncora",
"descriptionDe": [
"Erstelle ein a Element oder \"Anker Element\", das auf http://freecatphotoapp.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.",
"![\"Ein](\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\")
",
"Hier ist ein Beispiel: <p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>"
],
"title": "Link to External Pages with Anchor Elements",
"description": [
"a elements, also known as anchor elements, are used to link to content outside of the current page.",
"Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a 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>",
"Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor 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.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" ], "tests": [ "assert((/cat photos/gi).test($(\"a\").text()), 'message: Youra element should have the anchor text of \"cat photos\".');",
"assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an a element that links to http://freecatphotoapp.com');",
"assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a element has a closing tag.');"
],
"type": "waypoint",
"titleEs": "Enlaza páginas externas con elementos ancla",
"descriptionEs": [
"Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.",
"Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
" ",
"He aquí un ejemplo:",
"<p>Aquí está un <a href=\"https://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>",
"Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"."
],
"titleDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aede08817",
"descriptionPtBR": [
"Outra vez, aqui está um diagrama de um elemento a para você usar como referência.",
"",
"Veja um exemplo:",
"<p>Este é um <a href=\"https://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p>",
"Aninhamento significa ter um elemento no interior de outro elemento.",
"Agora, aninhe o elemento a existente dentro de um novo elemento p de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum."
],
"namePtBR": "Aninhe o Elemento Âncora no Interior de um Parágrafo",
"descriptionDe": [
"Jetzt umschließe dein a 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=\"https://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>"
],
"title": "Nest an Anchor Element within a Paragraph",
"description": [
"Again, here's a diagram of an a element for your reference:",
"",
"Here's an example:",
"<p>Here's a <a href=\"https://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>",
"Nesting just means putting one element inside of another element.",
"Now nest your existing a element within a new p element (just after the existing h2 element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
],
"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.
" ], "tests": [ "assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0, 'message: You need ana element that links to \"http://www.freecatphotoapp.com\".');",
"assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your a element should have the anchor text of \"cat photos\"');",
"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new p element around your a element.');",
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\"), 'message: Your a element should be nested within your new p element.');",
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/^\\s*View\\smore\\s/gi), 'message: Your p element should have the text \"View more \" (with a space after it).');",
"assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your a element should not have the text \"View more\".');",
"assert(code.match(/<\\/p>/g) && code.match(//g).length === code.match(/
p elements has a closing tag.');",
"assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');"
],
"type": "waypoint",
"titleEs": "Anida un elemento de ancla dentro de un párrafo",
"descriptionEs": [
"Una vez más, aquí está un diagrama de un elemento a para tu referencia:",
"",
"He aquí un ejemplo:",
"<p>Aquí hay un <a href=\"https://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p>",
"Anidamiento simplemente significa poner un elemento dentro de otro elemento.",
"Ahora anida el elemento a existente dentro de un nuevo elemento p (justo después del elemento h2 que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ."
],
"titleDe": "Waypoint Umschließe ein Anker Element mit einem Paragraphen",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08817",
"descriptionPtBR": [
"As vezes você pode querer adicionar elementos a em sua página web antes de saber o link que as ligará.",
"Isso também é útil quando você desejar mudar o comportamento de um link utilizando jQuery, o que vamos aprender mais adiante.",
"Substitua o atributo href de seu elemento a por um #, também conhecido como símbolo de hash ou hashtag. Isso o transformará em um link inativo."
],
"namePtBR": "Crie Links Inativos com o Símbolo Cerquilha",
"descriptionDe": [
"Nutze das Hash Symbol (#) um deine a 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."
],
"title": "Make Dead Links using the Hash Symbol",
"description": [
"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 the value of your a element's href attribute with a #, also known as a hash symbol, to turn it into a dead link."
],
"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.
" ], "tests": [ "assert($(\"a\").attr(\"href\") === \"#\", 'message: Youra element should be a dead link with a href attribute set to \"#\".');"
],
"type": "waypoint",
"titleEs": "Haz vínculos muertos utilizando el símbolo de numero",
"descriptionEs": [
"A veces quieres agregar elementos a a tu sitio web antes de saber qué enlazarán.",
"Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, lo cual aprenderemos más adelante.",
"Reemplaza el atributo href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto."
],
"titleDe": "Waypoint: Erstelle tote Links mit dem Hash Symbol",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08820",
"descriptionPtBR": [
"Você pode transformar elementos em links ao aninhá-los com um elemento a.",
"Aninhe sua imagem dentro de um elemento a. Temos aqui um exemplo.",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>",
"Lembre de usar # como atributo href de seu elemento a para tornar o link inativo."
],
"namePtBR": "Transforme uma Imagem em um Link",
"descriptionDe": [
"Umschließe dein img 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=\"https://bit.ly/fcc-running-cats\"/></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."
],
"title": "Turn an Image into a Link",
"description": [
"You can make elements into links by nesting them within an a element.",
"Nest your image within an a element. Here's an example:",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>",
"Remember to use # 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."
],
"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.
" ], "tests": [ "assert($(\"a\").children(\"img.smaller-image\").length > 0, 'message: Nest the existingimg element within an a element.');",
"assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your a element should be a dead link with a href attribute set to #.');",
"assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');"
],
"type": "waypoint",
"titleEs": "Convierte una imagen en un vínculo",
"descriptionEs": [
"Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.",
"Anida tu imagen dentro de un elemento a. He aquí un ejemplo: ",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>",
"Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.",
"Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
],
"titleDe": "Waypoint: Verlinke ein Bild",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08818",
"descriptionPtBR": [
"Os atributos alt, também conhecidos como texto alternativo, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos alt também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos alt.",
"Em resumo: Todas as imagem devem ter um atributo alt!",
"Você pode adicionar um atributo alt já no elemento img assim:",
"<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">",
"Adicione um atributo alt com o texto A cute orange cat lying on its back para a nossa foto com o gato."
],
"namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo",
"descriptionDe": [
"Füge zu unserem Katzen-Bild ein alt 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.\"/>"
],
"title": "Add Alt Text to an Image for Accessibility",
"description": [
"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. And search engines also look at alt attributes.",
"In short, every image should have an alt attribute!",
"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\">",
"Add an alt attribute with the text A cute orange cat lying on its back to our cat photo."
],
"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.
" ], "tests": [ "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have analt attribute set to A cute orange cat lying on its back');"
],
"type": "waypoint",
"titleEs": "Agrega texto alternativo a una imagen para dar Accesibilidad",
"descriptionEs": [
"Los atributos alt también conocidos como texto alternativo, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos alt también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Los motores de búsqueda también examinan los atributos alt. ",
"En resumen, ¡cada imagen debe tener un atributo alt!",
"Puedes agregar un atributo alt justo en el elemento img así:",
"<img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\">",
"Añade un atributo alt con el texto A cute orange cat lying on its back a nuestra foto del gato."
],
"titleDe": "Waypoint: Füge Alt Text für mehr Barrierefreiheit hinzu",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08827",
"descriptionPtBR": [
"O HTML possui um elemento especial para a criação de listas não ordenadas, ou listas com marcadores.",
"As listas não ordenadas iniciam com um elemento <ul>. Logo após, possuem uma série de elementos <li>.",
"Por exemplo:",
"<ul>",
" <li>leite</li>",
" <li>queijo</li>",
"</ul>",
"Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".",
"Apague os dois últimos elementos p e no final da página crie uma lista não ordenada com três coisas que os gatos adoram."
],
"namePtBR": "Crie uma Lista Não Ordenada com Marcadores",
"descriptionDe": [
"Ersetze deine p 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."
],
"title": "Create a Bulleted Unordered List",
"description": [
"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>", "would create a bullet point-style list of \"milk\" and \"cheese\".", "Remove the last two
<li>milk</li>
<li>cheese</li>
</ul>
p elements and create an unordered list of three things that cats love at the bottom of the page."
],
"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.
" ], "tests": [ "assert($(\"ul\").length > 0, 'message: Create aul element.');",
"assert($(\"ul li\").length > 2, 'message: You should have three li elements within your ul element.');",
"assert(code.match(/<\\/ul>/gi) && code.match(/li elements have closing tags.');"
],
"type": "waypoint",
"titleEs": "Crea una lista no ordenada con viñetas",
"descriptionEs": [
"HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.",
"Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.",
"Por ejemplo: ",
"<ul>", "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", "Elimina los dos últimos elementos
<li>leche</li>
<li>queso</li>
</ul>
p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman."
],
"titleDe": "Waypoint: Erstelle eine ungeordnete Liste",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08828",
"descriptionPtBR": [
"O HTML possui um elemento especial para a criação de listas ordenadas, ou listas numeradas.",
"As listas ordenadas iniciam com um elemento <ol>. Logo após, contém uma série de elementos <li>.",
"Por exemplo:",
"<ol>",
" <li>Garfield</li>",
" <li>Sylvester</li>",
"</ol>",
"Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".",
"Crie uma lista ordenada com as três coisas que os gatos mais odeiam."
],
"namePtBR": "Crie uma Lista Ordenada",
"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 <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."
],
"title": "Create an Ordered List",
"description": [
"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>", "would create a numbered list of \"Garfield\" and \"Sylvester\".", "Create an ordered list of the top 3 things cats hate the most." ], "challengeSeed": [ "", "", "", "
<li>Garfield</li>
<li>Sylvester</li>
</ol>
Click here for cat photos.
", "", "Things cats love:
", "Top 3 things cats hate:
" ], "tests": [ "assert($(\"ul\").length > 0, 'message: You should have anul element on your page.');",
"assert($(\"ol\").length > 0, 'message: You should have an ol element on your page.');",
"assert($(\"ul li\").length > 2, 'message: You should have three li elements within your ul element.');",
"assert($(\"ol li\").length > 2, 'message: You should have three li elements within your ol element.');",
"assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/ul element has a closing tag.');",
"assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/ol element has a closing tag.');",
"assert(code.match(/<\\/li>/g) && code.match(/li element has a closing tag.');"
],
"type": "waypoint",
"titleEs": "Crear una lista ordenada",
"descriptionEs": [
"HTML tiene un elemento especial para la creación de listas ordenadas, o listas de estilo numerado.",
"Las listas ordenadas comienzan con un elemento <ol>. Luego contienen un número de elementos <li>.",
"Por ejemplo:",
"<ol>", "creará una lista numerada con \"Garfield\" y \"Sylvester\".", "Crea una lista ordenada de los 3 cosas que más odian los gatos." ], "titleDe": "Waypoint: Erstelle eine geordnete Liste", "challengeType": 0 }, { "id": "bad87fee1348bd9aedf08829", "descriptionPtBR": [ "Agora vamos criar um formulário web.", "Os campos de texto são uma forma conveniente de obter uma resposta do usuário.", "Você pode criar um assim:", "
<li>Garfield</li>
<li>Sylvester</li>
</ol>
<input type=\"text\">",
"Note que os elementos input são de fechamento automático.",
"Crie um elemento input de tipo text abaixo de suas listas."
],
"namePtBR": "Crie um Campo de Texto",
"descriptionDe": [
"Nun erstellen wir ein Web Formular. Erstelle ein Textfeld unter deinen Listen.",
"Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.",
"So kannst du eines erstellen: <input type=\"text\">. Beachte, dass input Elemente selbstschließend sind."
],
"title": "Create a Text Field",
"description": [
"Now let's create a web form.",
"Text inputs are a convenient way to get input from your user.",
"You can create one like this:",
"<input type=\"text\">",
"Note that input elements are self-closing.",
"Create an input element of type text below your lists."
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "Things cats love:
", "Top 3 things cats hate:
", "input element of type text.');"
],
"type": "waypoint",
"titleEs": "Crea un campo de texto",
"descriptionEs": [
"Ahora vamos a crear un formulario web.",
"Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.",
"Puedes crear uno como este:",
"<input type=\"text\">",
"Ten en cuenta que los elementos input son de cierre automático.",
"Crea un elemento input de tipo text debajo de tus listas."
],
"titleDe": "Waypoint: Erstelle ein Textfeld",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aedf08830",
"descriptionPtBR": [
"O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.",
"Você pode criar um texto indicativo assim:",
"<input type=\"text\" placeholder=\"isso é um texto indicativo\">",
"Estabeleça o valor do texto indicativo do seu campo de texto como \"cat photo URL\"."
],
"namePtBR": "Adicione Texto Indicativo a um Campo de Texto",
"descriptionDe": [
"Setze bei deinem 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.\">"
],
"title": "Add Placeholder Text to a Text Field",
"description": [
"Your placeholder text is what appears in your text input before your user has input anything.",
"You can create placeholder text like so:",
"<input type=\"text\" placeholder=\"this is placeholder text\">",
"Set the placeholder value of your text input to \"cat photo URL\"."
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "Things cats love:
", "Top 3 things cats hate:
", "placeholder attribute text input element.');",
"assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');",
"assert($(\"input[type=text]\").length > 0 && code.match(/URL\\s*[\"\\']\\s*\\/?>/gi), 'message: The finished input element should have valid syntax.');"
],
"type": "waypoint",
"titleEs": "Agrega un texto de relleno a un campo de texto",
"descriptionEs": [
"El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.",
"Puedes crear un texto de relleno de esta manera:",
"<input type=\"text\" placeholder=\"este es un texto de relleno\">",
"Establece el valor del texto de relleno de tu campo de texto como \"cat photo URL\"."
],
"titleDe": "Waypoint: Füge Platzhalter zu einem Textfeld hinzu",
"challengeType": 0
},
{
"id": "bad87fee1348bd9aede08830",
"descriptionPtBR": [
"É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento form.",
"Por exemplo:",
"<form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form>",
"Aninhe seu campo de texto em um elemento form. Adicione o atributo action=\"/submit-cat-photo\" para este elemento de formulário."
],
"namePtBR": "Crie um Elemento de Formulário",
"descriptionDe": [
"Umschließe dein Textfeld mit einem form Element. Füge anschließend das Attribut action=\"/submit-cat-photo\" 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 form Element bestimmst.",
"Zum Beispiel: <form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>"
],
"title": "Create a Form Element",
"description": [
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.",
"For example:",
"<form action=\"/url-where-you-want-to-submit-form-data\"></form>",
"Nest your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element."
],
"challengeSeed": [
"",
"",
"",
"Click here for cat photos.
", "", "Things cats love:
", "Top 3 things cats hate:
", "form element.');",
"assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your form has an action attribute which is set to /submit-cat-photo');",
"assert(code.match(/<\\/form>/g) && code.match(/"
],
"tests": [
"assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');",
"assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute type set to submit.');",
"assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');",
"assert(code.match(/<\\/button>/g) && code.match(/