![\"A](\"//i.imgur.com/jOc1JF1.png\" "\\"Click")
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\".",
"testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\".');"
}
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Willkommen bei der ersten Programmier-Challenge von Free Code Camp!",
"Mithilfe des eingebauten text editor kannst du den code bearbeiten.",
"Siehst du den Code <h1>Hallo</h1> im Editor? Das ist ein HTML element",
"Die meisten HTML Elemente haben einen opening tag und einen closing tag.",
"Öffnende Tags sehen so aus:",
"<h1>",
"Schließende Tags so:",
"</h1>",
"Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.",
"Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.",
"Um den Test dieser Challenge zu bestehen, ändere den Text deines h1 Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button."
]
},
"fr": {
"title": "Dites bonjour aux éléments HTML",
"description": [
"Bienvenue au premier défi de code de Free Code Camp.",
"Vous pouvez modifier le code dans votre éditeur texte, lequel est disponible dans cette page.",
"Voyez-vous le code dans l'éditeur texte qui dit <h1>Hello</h1>? C'est un élément HTML.",
"La plupart des éléments HTML ont une balise ouvrante et une balise fermante",
"Les balises ouvrantes ont cette apparence :",
"<h1>",
"Les balises fermantes ont cette apparence :",
"</h1>",
"Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.",
"Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.",
"Pour réussir le test de ce défi, changez le texte de l'élément h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"."
]
},
"pt-br": {
"title": "Diga Olá aos Elementos HTML",
"description": [
"Seja bem vindo ao primeiro desafio de programação do Free Code Camp!",
"Você pode editar o seu 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\"."
]
},
"ru": {
"title": "Скажи привет HTML-элементам",
"description": [
"Добро пожаловать на первое программное испытание Free Code Camp.",
"Вы можете редактировать код в вашем текстовом редакторе, который мы встроили в эту web-страницу.",
"Видите этот код в вашем текстовом редакторе: <h1>Hello</h1>? Это HTML элемент.",
"Большинство HTML-элементов имеют открывающую метку закрывающую метку.",
"Открывающие метки выглядят так:",
"<h1>",
"Закрывающие метки выглядят следующим образом:",
"</h1>",
"Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.",
"Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.",
"Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"."
]
}
}
},
{
"id": "bad87fee1348bd9aedf0887a",
"title": "Headline with the h2 Element",
"description": [
"Over the next few challenges, we'll build an HTML5 app that will look something like this:",
"",
"The h2 element you enter will create an h2 element on the website.",
"This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different and new sections.",
"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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:",
"",
"Das eingetragene h2 Element wird ein h2 Element auf der Website erzeugen.",
"Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. h1 Elemente werden oft für Hauptüberschriften verwendet, während h2 Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch h3, h4, h5 und h6 Elemente die verschiedene und neue Bereiche kennzeichnen.",
"Füge unter h1 \"Hello World\" ein zweites HTML Element h2 hinzu, in dem \"CatPhotoApp\" steht."
]
},
"fr": {
"title": "Un titre avec l'élément h2",
"description": [
"Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :",
"",
"L'élément h2 que vous entrerez créera un élément h2 sur le site.",
"Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.",
"Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"."
]
},
"pt-br": {
"title": "Cabeçalho com o Elemento h2",
"description": [
"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\"."
]
},
"ru": {
"title": "Заголовок с применением элемента h2",
"description": [
"В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:",
"",
"Вводимый вами элемент h2 создаст соответствующий элемент h2 на web-странице.",
"Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.",
"Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"Hello World\"."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08801",
"title": "Inform with the Paragraph Element",
"description": [
"p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
"You can create a p element like this:",
"<p>I'm a p tag!</p>",
"Create a p element below your h2 element, and give it the text \"Hello Paragraph\"."
],
"challengeSeed": [
"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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"p Elemente sind das bevorzugte Element für normale Paragraphentexte 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>",
"Erstelle ein p Element unter deinem h2 Element und füge den Text \"Hello Paragraph\" ein."
]
},
"fr": {
"title": "Informez avec l'élément paragraphe",
"description": [
"L'élément p est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",",
"Vous pouvez créer un élément p comme ceci :",
"<p>Je suis une balise p!</p>",
"Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"."
]
},
"pt-br": {
"title": "Informe com o Elemento Parágrafo",
"description": [
"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\"."
]
},
"ru": {
"title": "Проинформируйте с применением элемента p",
"description": [
"Элементы p предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".",
"Вы можете создать элемент p следующим образом:",
"<p>Я метка p!</p>",
"Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08802",
"title": "Uncomment HTML",
"description": [
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
"You can start a comment with <!-- and end a comment with -->",
"Uncomment your h1, h2 and p elements."
],
"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(!/[^fc]-->/gi.test(code.replace(/ *"
],
"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(/[^fc]-->/g).length > 1, 'message: Be sure to close each of your comments with -->.');",
"assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"
\") , 'message: Do not change the order of the h1 h2 or p in the code.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden werden.",
"Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen.",
"Kommentiere die h1 und p Elemente aus, aber lasse dein h2 Element unkommentiert."
]
},
"fr": {
"title": "Commentez du HTML",
"description": [
"Souvenez-vous que pour débuter un commentaire, vous devez utiliser <!-- et que pour le terminer, vous devez utiliser -->.",
"Ici vous devrez terminer le commentaire juste avant que l'élément h2 commence.",
"Commentez les éléments h1 et p, mais laissez l'élément h2 tel quel."
]
},
"pt-br": {
"title": "Comente o HTML",
"description": [
"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."
]
},
"ru": {
"title": "Закомментируйте HTML",
"description": [
"Помните, что для начала комментария вам необходимо использовать <!--, а для завершения комментария - -->",
"Тут вам необходимо завершить комментарий до начала вашего элемента h2.",
"Закомментируйте ваши элементы h1 и p, но оставьте ваш элемент h2 раскомментированным."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08833",
"title": "Fill in the Blank with Placeholder Text",
"description": [
"Web developers traditionally use lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from 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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"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 text nutzen.",
"Ersetze den Text in deinem p Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff."
]
},
"fr": {
"title": "Remplissez les blancs avec du faux-texte",
"description": [
"Les développeurs Web utilisent traditionnellement du lorem ipsum comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.",
"Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16ème siècle et cette tradition se poursuit sur le Web.",
"Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte Kitty ipsum.",
"Remplacez le texte à l'intérieur des éléments p avec ces quelques mots du texte 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."
]
},
"pt-br": {
"title": "Preencha Espaços com Texto de Espaço Reservado",
"description": [
"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."
]
},
"ru": {
"title": "Заполните пустоты замещающим текстом",
"description": [
"Традиционно web-разработчики используют текст lorem ipsum в качестве замещающего текста. Он называется тектсом lorem ipsum по первым двум словам известного пассажа Цицерона из Древнего Рима.",
"Текст lorem ipsum применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.",
"5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом kitty ipsum.",
"Замените текст внутри вашего элемента p первыми двумя словами текста 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."
]
}
}
},
{
"id": "bad87fed1348bd9aedf08833",
"title": "Delete HTML Elements",
"description": [
"Our phone doesn't have much vertical space.",
"Let's remove the unnecessary elements so we can start building our CatPhotoApp.",
"Delete your h1 element so we can simplify our view."
],
"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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Unser Smartphone hat nicht sehr viel vertikalen Platz.",
"Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp entwickeln können.",
"Lösche die Elemente h1, damit wir etwas Ordnung schaffen."
]
},
"fr": {
"title": "Supprimer des éléments HTML",
"description": [
"Notre téléphone n'a pas beaucoup d'espace vertical.",
"Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.",
"Supprimez l'élément h1 afin de simplifier l'affichage."
]
},
"pt-br": {
"title": "Apague Elementos HTML",
"description": [
"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."
]
},
"ru": {
"title": "Удалите HTML-элементы",
"description": [
"Наш телефон не очень большой по-вертикали.",
"Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.",
"Удалите ваш h1 элемент, чтобы упростить общий вид."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08803",
"title": "Change the Color of Text",
"description": [
"Now let's change the color of some of our text.",
"We can do this by changing the style of your h2 element.",
"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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Lass uns jetzt die Farbe von unserem Text ändern.",
"Wir können das bewerkstelligen, indem wir den style des h2 Elements ändern.",
"Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.",
"So könntest du die Textfarbe des h2 Elements in Blau ändern:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"Ändere den Style des h2 Elements, damit die Textfarbe rot (\"red\") ist."
]
},
"fr": {
"title": "Changer la couleur du texte",
"description": [
"Changeons maintenant la couleur de quelques-uns de nos textes.",
"Nous pouvons le faire en changeant le style de votre élément h2.",
"Le style responsable de la couleur de texte d'un élément est \"color\".",
"Voici comment changer en bleu la couleur du texte de votre élément h2 :",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"Changez le style de votre élément h2 pour que son texte soit de couleur rouge."
]
},
"pt-br": {
"title": "Substitua a Cor do Texto",
"description": [
"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."
]
},
"ru": {
"title": "Измените цвет текста",
"description": [
"Теперь давайте изменим цвет части нашего текста.",
"Мы можем сделать это изменив style нашего элемента h2.",
"Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".",
"Вот как вы могли бы установить цвет текста вашего элемента h2 синим:",
"<h2 style=\"color: blue\">CatPhotoApp</h2>",
"Измените стиль вашего элемента h2 таким образом, чтобы текст элемента стал красным."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08805",
"title": "Use CSS Selectors to Style Elements",
"description": [
"With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.",
"When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were giving that individual h2 element an inline style.",
"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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"CSS liefert dir hunderte Attribute oder properties 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 CSS, was für Cascading Style Sheets steht, zu benutzen.",
"Erstelle über deinem Code ein style Element:",
"<style>", "Innerhalb des Style Elements kannst du einen
</style>
CSS selector für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente rot färben willst, schreibst du:",
"<style>", "Beachte, dass du öffnende und schließende geschwungene Klammern (
h2 {color: red;}
</style>
{ und }) um jeden Style setzen musst. Außerdem musst du sichergehen, dass deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon.",
"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."
]
},
"fr": {
"title": "Utiliser les sélecteurs CSS pour styliser des éléments",
"description": [
"Avec CSS, il y a des centaines de propriétés que vous pouvez utliser pour changer l'apparence d'un élément dans votre page.",
"Quand vous avez entré <h2 style=\"color: red\">CatPhotoApp</h2>, vous donniez à cet élément h2 uniquement, un style inline.",
"C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser CSS, acronyme de Cascading Style Sheets.",
"Au sommet de votre code, créez un élément style comme ceci :",
"<style>", "À l'intérieur de cet élément style, vous pouvez créer des
</style>
sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :",
"<style>", "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes (
h2 {color: red;}
</style>
{ and }) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.",
"Supprimez les attributs de styles de votre élément h2 et créez plutôt un élément de style CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments h2 de couleur bleu."
]
},
"pt-br": {
"title": "Use Seletores CSS para Estilizar Elementos",
"description": [
"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."
]
},
"ru": {
"title": "Используйте CSS-селекторы для стилизации элементов",
"description": [
"В CSS существуют сотни CSS-свойств, которые вы можете использовать для изменения внешнего вида элементов вашей страницы.",
"Когда вы вводите <h2 style=\"color: red\">CatPhotoApp</h2>, вы присваиваете определённому h2 элементу встроенный стиль.",
"Это один из способов добавления стиля к элементу, но лучший способ - использование CSS, который является сокращением от Cascading Style Sheets (Каскадные таблицы стилей).",
"Вверху вашего кода создайте элемент style следующим образом:",
"<style>", "Внутри этого элемента
</style>
style вы можете создать CSS-селектор для всех элементов h2 в документе. Например, если бы вы хотели, чтобы все элементы h2 были красными, ваш элемент style выглядел бы следующим образом:",
"<style>", "Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок (
h2 {color: red;}
</style>
{ и }) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента style. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.",
"Удалите атрибут стиль вашего элемента h2 и взамен создайте CSS-элемент style. Добавьте необходимый CSS, чтобы все элементы h2 стали синими."
]
}
}
},
{
"id": "bad87fee1348bd9aecf08806",
"title": "Use a CSS Class to Style an Element",
"description": [
"Classes are reusable styles that can be added to HTML elements.",
"Here's an example CSS class declaration:",
"<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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.",
"So sieht eine CSS Klasse aus:",
"<style>", "Du siehst, dass wir die CSS Klasse
.blue-text {
color: blue;
}
</style>
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 beginnen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.",
"Ändere deinen h2 Selektor innerhalb deines style Elements zu .red-text und ändere den Farbwert von blue zu red.",
"Gib deinem h2 Element das class Attribut mit dem Wert 'red-text'."
]
},
"fr": {
"title": "Utiliser les classes CSS pour styler un élément",
"description": [
"Les classes sont des styles réutilisables qui peuvent être ajoutées à des éléments HTML.",
"Voici un exemple de déclaration de classe CSS :",
"<style>", "Remarquez que nous avons créer une classe CSS nommée
.blue-text {
color: blue;
}
</style>
blue-text à l'intérieur de notre balise <style>.",
"Vous pouvez appliquer une classe à un élément HTML comme ceci :",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Prenez note que que dans votre élément CSS style, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.",
"À l'intérieur de votre élément style, changez le sélecteur du h2 pour .red-text et changez la couleur, passant de blue à red.",
"Donnez à votre élément h2 l'attribut de classe la valeur de red-text."
]
},
"pt-br": {
"title": "Use Classes CSS para Estilizar Elementos",
"description": [
"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."
]
},
"ru": {
"title": "Используйте CSS-класс для стилизации элемента",
"description": [
"Классы являются повторно применяемыми стилями, которые могут быть добавлены к HTML-элементам.",
"Вот пример объявления CSS-класса:",
"<style>", "Вы можете увидеть, что мы создали CSS-класс названный
.blue-text {
color: blue;
}
</style>
blue-text внутри элемента <style>.",
"Вы можете применить класс к HTML-элементу следующим образом:",
"<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Обратите внимание, что в вашем CSS-элементе style названию классов следует начинаться с точки. При присваивании классов HTML-элементам названия классов не должны начинаться с точки.",
"Внутри вашего элемента style, замените селектор h2 на .red-text и измените значение цвета с blue на red.",
"Присвойте вашему элементу h2 атрибут class со значением 'red-text'."
]
}
}
},
{
"id": "bad87fee1348bd9aefe08806",
"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 remember you don't need to use a period when attaching classes to an HTML element:", "
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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.",
"Vergiss nicht dass CSS Klassenselektoren einen Punkt am Anfang brauchen:",
".blue-text {", "Aber Klassen-Deklarationen brauchen keinen Punkt:", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Füge die red-text Klasse deinem h2 und p Element hinzu."
]
},
"fr": {
"title": "Stylez plusieurs éléments avec une classe CSS",
"description": [
"Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant class=\"votre-classe-ici\" à l'intérieur de la balise ouvrante correspondante.",
"Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :",
".blue-text {", "Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Appliquez la classe red-text à vos éléments h2 et p."
]
},
"pt-br": {
"title": "Estilize Múltiplos Elementos com uma Classe CSS",
"description": [
"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."
]
},
"ru": {
"title": "Стилизуйте множество элементов с помощью CSS-класса",
"description": [
"Помните, что вы можете присваивать классы HTML-элементам используя class=\"ваш-класс-тут\" внутри открывающей метки соответствующего элемента.",
"Помните, что селекторы CSS-классов должны начинаться с точки, например:",
".blue-text {", "Но также не забывайте, что присваивание классов не использует точку, например:", "
color: blue;
}
<h2 class=\"blue-text\">CatPhotoApp</h2>",
"Примените класс red-text к вашим элементам h2 и p."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08806",
"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 after the existing 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:eq(0)\").attr(\"class\") === \"red-text\", 'message: The first p element should have the class red-text.');",
"assert($(\"p:eq(1)\").attr(\"class\") === undefined, 'message: Do not add a class attribute to the second p element.');",
"assert(parseInt($(\"p:not([class])\").css(\"font-size\"), 10) > 15, 'message: Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Schriftgröße wird von dem CSS Attribut font-size kontrolliert:",
"
h1 {", "Erstelle ein zweites
font-size: 30px;
}
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.",
"Erstelle dann innerhalb deines <style> Elements, das auch deine red-text Klasse enthält, einen Eintrag für p Elemente und setzte font-size auf 16 Pixel (16px).",
"Notizp Element hinzu."
]
},
"fr": {
"title": "Changez la taille de police d'un élément",
"description": [
"La taille de police est contrôlée par la propriété CSS font-size, comme ceci :",
"h1 {", "Créez un second élément
font-size: 30px;
}
p après l'élément p existant avec le texte kitty ipsum suivant : Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.",
"À l'intérieur de la même balise <style> qui contiens votre classe .red-text, créez une nouvelle entrée pour les éléments p et paramétrer le font-size à 16 pixels (16px).",
"Prenez notep."
]
},
"pt-br": {
"title": "Mude o Tamanho da Fonte de um Elemento",
"description": [
"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)."
]
},
"ru": {
"title": "Измените размер шрифта элемента",
"description": [
"Размером шрифта управляют с помощтю CSS-своайства font-size, например:",
"h1 {", "Создайте второй элемент
font-size: 30px;
}
p со следующи текстом 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.",
"Внутри того же элемента <style>, который содержит ваш класс red-text, создайте вхождение для элементов p и установите свойство font-size равным 16 пикселей (16px).",
"Вниманиеp."
]
}
}
},
{
"id": "bad87fee1348bd9aede08807",
"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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"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 {", "Definiere für alle
font-family: Sans-serif;
}
p Elemente die Schriftart Monospace."
]
},
"fr": {
"title": "Paramétrer la famille de police d'un élément",
"description": [
"Vous pouvez paramétrer la police d'un élément en utilisant la propriété font-family.",
"Par exemple, si vous voulez paramétrer la police de votre élément h2 à Sans-serif, vous devez utiliser le CSS suivant :",
"h2 {", "Faites en sorte que tous vos éléments
font-family: Sans-serif;
}
p aient la police Monospace."
]
},
"pt-br": {
"title": "Defina a Fonte para um Elemento",
"description": [
"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."
]
},
"ru": {
"title": "Установите семейство шрифтов для элемента",
"description": [
"Вы можете установить семейство шрифтов для элемента используя свойство font-family.",
"Например, если бы вы хотели установить семейство шрифтов Sans-serif для вашего элемента h2, вы бы использовали следующий CSS:",
"h2 {", "Присвойте шрифт
font-family: Sans-serif;
}
Monospace всем вашим элементам p."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08807",
"title": "Import a Google Font",
"description": [
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
"First, you'll need to make a 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\">",
"Remember, before you can apply styles, like a new font, to an element, you'll need to create a CSS rule.",
"h2 {", "Create a CSS rule for the
font-family: Sans-serif;
}
font-family of Lobster and apply this new font 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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Lass uns jetzt eine Google Font importieren und verwenden. (Beachte dass du diese Challenge überspringen musst, falls Google in deinem Land blockiert wird)",
"Zuerst musst du einen call (Anfrage) an Google machen um um auf Lobster zugreifen und in dein HMTL einbinden zu können.",
"Kopiere den folgenden Code und füge diesen in deinen Editor oben 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.",
"Füge dem h2 Element die Schriftart oder font-family Lobster hinzu."
]
},
"fr": {
"title": "Importer une police de Google",
"description": [
"Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).",
"Premièrement, vous devrez faire un appel vers Google pour prendre la police Lobster et la charger dans votre HTML.",
"Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :",
"Maintenant vous pouvez paramétrer Lobster comme valeur de police de votre élément h2.",
"Appliquer la valeur Lobster à la font-family de votre élément h2."
]
},
"pt-br": {
"title": "Importe uma Fonte a Partir do Google Fonts",
"description": [
"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."
]
},
"ru": {
"title": "Импортируйте шрифт Google",
"description": [
"Теперь давайте импортируем и применим шрифт Google (обратите внимание, что если Google заблокирован в ваней стране, вам нужно будет пропустить это испытание).",
"Сначала вам понадобится сделать запрос к Google для получения шрифта Lobster и загрузить его в ваш HTML.",
"Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"Теперь вы можете установить шрифт Lobster в качестве значения семейства шрифтов для вашего h2.",
"Примените свойство font-family со значением Lobster к вашему элементу h2."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08808",
"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.",
"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($(\"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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem Monospace, Serif und Sans-Serif.",
"Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.",
"Wenn du zum Beispiel einem Element die Schriftart Helvetica geben möchtest, aber gleichzeitig als Alertnative die Schrift Sans-Serif laden willst, falls Helvetica nicht verfügbar ist, kannst du diesen CSS Style verwenden:",
"p {", "Kommentiere jetzt den Aufruf an Google Fonts aus, sodass
font-family: Helvetica, Sans-Serif;
}
Lobster nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart Monospace geladen wird."
]
},
"fr": {
"title": "Spécifier comment vos polices devraient dégrader",
"description": [
"Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend Monospace, Serif et Sans-Serif.",
"Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.",
"Par exemple, si vous voulez qu'un élément utilise la police Helvetica, mais également dégrader vers Sans-Serif lorsque la police Helvetica n'est pas disponible, vous pouvez utiliser le style CSS suivant :",
"p {", "Maintenant, commenter votre appel vers les polices de Google, pour que la police
font-family: Helvetica, Sans-Serif;
}
Lobster ne soit pas disponible. Regardez comment la police se dégrade vers Monospace."
]
},
"pt-br": {
"title": "Especifique como as Fontes Devem se Degradar",
"description": [
"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."
]
},
"ru": {
"title": "Укажите порядок деградации шрифтов",
"description": [
"Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них Monospace, Serif и Sans-Serif",
"Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.",
"Например, если бы вы хотели, чтобы элемент использовал шрифт Helvetica, но также деградировал до шрифта Sans-Serif, когда Helvetica недоступен, вы могли бы использовать этот CSS-стиль:",
"p {", "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт
font-family: Helvetica, Sans-Serif;
}
Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08812",
"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\">",
"All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
"Let's add an alt attribute to our img example above:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up. \">",
"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|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have asrc attribute that points to the kitten image.');",
"assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element must have an alt attribute.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"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=\"https://www.deine-bild-quelle.com/dein-bild.jpg\">",
"Beachte dass in den meisten Fällen img Elemente selbstschließend sind.",
"Versuche es mit diesem Bild:",
"https://bit.ly/fcc-relaxing-cat"
]
},
"fr": {
"title": "Ajouter des images à votre site Web",
"description": [
"Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.",
"Un exemple de cette procédure serait :",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">",
"Note that in most cases, img elements are self-closing.",
"Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.",
"Essayez avec cette image :",
"https://bit.ly/fcc-relaxing-cat"
]
},
"pt-br": {
"title": "Adicione Imagens em sua Página Web",
"description": [
"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"
]
},
"ru": {
"title": "Добавьте изображения к вашему сайту",
"description": [
"Вы можете добавлять изображения к вашему сайту с помощью элемента img и указывать ссылки определённых изображений с помощтю атрибута src.",
"Примером добавления мзображения может служить:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">",
"Обратите внимание, что в большинстве случаев элементы img являются самозакрывающимися.",
"Попробуйте добавить изображение используя следующую ссылку:",
"https://bit.ly/fcc-relaxing-cat"
]
}
}
},
{
"id": "bad87fee1348bd9acdf08812",
"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>
.larger-image {
width: 500px;
}
</style>
",
"Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.",
"Note
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge."
],
"challengeSeed": [
"",
"",
"",
"CatPhotoApp
",
"",
"![\"A](\"https://bit.ly/fcc-relaxing-cat\")
",
"",
"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[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'message: Your img 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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"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>
",
"Erstelle eine Klasse mit dem Namen smaller-image und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
"Notiz
Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen."
]
},
"fr": {
"title": "Redimensionner vos images",
"description": [
"Le CSS a une propriété nommé width qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.",
"Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
"<style>
.larger-image {
width: 500px;
}
</style>
",
"Créez une classe nommée smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
"Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
]
},
"pt-br": {
"title": "Dê um Tamanho para suas Imagens",
"description": [
"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."
]
},
"ru": {
"title": "Установите размер ваших изображений",
"description": [
"В CSS есть свойтсво, называемое width, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px (пиксели) для указания ширины изображения.",
"Например, если бы мы хотели создать CSS-класс larger-image, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:",
"<style>
.larger-image {
width: 500px;
}
</style>
",
"Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.",
"Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
]
}
}
},
{
"id": "bad87fee1348bd9bedf08813",
"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>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
",
"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.",
"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": [
"",
"",
"",
"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.
"
],
"tests": [
"assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your img 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",
"challengeType": 0,
"translations": {
"de": {
"description": [
"CSS Rahmen haben Attribute wie style, color und width",
"Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:",
"<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
",
"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 deinem Katzenfoto hinzu.",
"Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im class Attribut trennst. Zum Beispiel:",
"<img class=\"class1 class2\">"
]
},
"fr": {
"title": "Ajouter des bordures autour de vos éléments",
"description": [
"Les bordures CSS ont des propriétés comme style, color et width",
"Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
"<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
",
"Créer une classe nommée thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
"Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :",
"<img class=\"class1 class2\">"
]
},
"pt-br": {
"title": "Adicione Bordas ao Redor de seus Elementos",
"description": [
"As bordas em CSS possuem propriedades como style, 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\">"
]
},
"ru": {
"title": "Дбавьте границы вокруг ваших элементов",
"description": [
"CSS-границы имеют свойства: style, color и width",
"Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:",
"<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
}
</style>
",
"Создайте класс thick-green-border, который добавляет зелёную границу шириной в 10 пикселей со стилем solid вокруг HTML-элемента и примените этот класс к вашему фото кота.",
"Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:",
"<img class=\"class1 class2\">"
]
}
}
},
{
"id": "bad87fee1348bd9aedf08814",
"title": "Add Rounded Corners with a Border Radius",
"description": [
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called 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": [
"",
"",
"",
"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.
"
],
"tests": [
"assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');",
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of 10px');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Füge abgerundete Ecken mit Border Radius hinzu",
"description": [
"Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.",
"Du kannst einen border-radius mit Pixeln deklarieren. Gib deinem Katzenfoto einen border-radius von 10px.",
"Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen border-radius zu der .thick-green-border oder .smaller-image Klasse hinzufügen."
]
},
"es": {
"title": "Agrega esquinas redondeadas usando Border Radius",
"description": [
"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."
]
},
"pt-br": {
"title": "Insira Bordas Arredondadas com o Border Radius",
"description": [
"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."
]
},
"ru": {
"title": "Добавьте скруглённые углы с помощью радиуса границы",
"description": [
"У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius.",
"Вы можете указать значения border-radius в пикселях. Присвойте вашему фото кота свойство border-radius со значением 10px.",
"Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius как к классу .thick-green-border, так и к классу .smaller-image."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08815",
"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": [
"",
"",
"",
"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.
"
],
"tests": [
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of 50%, making it perfectly circular.');",
"assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle runde Bilder mit einem Border Radius",
"description": [
"Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen.",
"Gib deinem Katzenfoto einen border-radius von 50%."
]
},
"es": {
"title": "Crea imágenes circulares usando Border Radius",
"description": [
"Además de pixeles, puedes especificar un border-radius usando porcentajes.",
"Dale a tu foto del gato un border-radius de 50%."
]
},
"pt-br": {
"title": "Deixe as Imagens Circulares com o Border Radius",
"description": [
"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%."
]
},
"ru": {
"title": "Сделайте круглые изображения с помощью радиуса границы",
"description": [
"В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius.",
"Присвойте вашему фото кота свойство border-radius со значением 50%."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08816",
"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.",
"![\"a](\"//i.imgur.com/hviuZwe.png\" "\\"Click")
",
"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": [
"",
"",
"",
"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.
"
],
"tests": [
"assert((/cat photos/gi).test($(\"a\").text()), 'message: Your a 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",
"challengeType": 0,
"translations": {
"de": {
"title": "Verlinke externe Seiten mit Anker Elementen",
"description": [
"a Elemente, auch bekannt als anchor (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.",
"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 zu Free Code Camp</a> dem du folgen kannst.</p>",
"Erstelle ein a Element, das auf http://freecatphotoapp.com verlinkt und den \"cat photos\" als anchor text (Link-Text) beinhaltet."
]
},
"es": {
"title": "Enlaza páginas externas con elementos ancla",
"description": [
"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\"."
]
},
"pt-br": {
"title": "Ligue Páginas Externas com o Elemento Âncora",
"description": [
"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.",
" ",
"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\"."
]
},
"ru": {
"title": "Присоедините внешние страницы с помощью якорных элементов",
"description": [
"Элементы a, также известные как якорные элементы, применяют для связи с содержимым вне текущей страницы.",
"Вот диаграмма элемента a. В этом случае, элемент a использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.",
"",
"Вот пример:",
"<p>Вот <a href=\"http://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>",
"Создайте элемент a, который присоединяет http://freecatphotoapp.com и имеет значение \"cat photos\" в качестве текста якоря."
]
}
}
},
{
"id": "bad87fee1348bd9aede08817",
"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": [
"",
"",
"",
"CatPhotoApp
",
"",
"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[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0, 'message: You need an a 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(/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",
"challengeType": 0,
"translations": {
"de": {
"title": "Umschließe ein Anker Element mit einem Paragraphen",
"description": [
"Hier ist nochmal ein Beispiel für ein a Element:",
"",
"Hier ist ein Beispiel:",
"<p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p>",
"Nesting bedeuted ein Element innerhalb eines anderen Elements zu schreiben",
"Jetzt umschließe dein a Element mit einem neuen p Element (direkt nach dem bereits existierenden h2 Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text."
]
},
"es": {
"title": "Anida un elemento de ancla dentro de un párrafo",
"description": [
"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 ."
]
},
"pt-br": {
"title": "Aninhe o Elemento Âncora no Interior de um Parágrafo",
"description": [
"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."
]
},
"ru": {
"title": "Создайте вложенный якорный элемент внутри параграфа",
"description": [
"Вот диаграмма элемента a:",
"",
"Вот пример:",
"<p>Вот <a href=\"https://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>",
"Вложенность значит установку одного элемента внутрь друго элемента.",
"Теперь вложите ваш существующий элемент a внутрь нового элемента p (сразу после существующего элемента h2) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08817",
"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.",
"The href attribute is the quoted URL link within the a element. Replace the link 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 the value of the href attribute set to \"#\".');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle tote Links mit dem Hash Symbol",
"description": [
"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 später noch behandeln.",
"Ersetze den Inhalt des href Attributs deines a Elements mit einem #, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen."
]
},
"es": {
"title": "Haz vínculos muertos utilizando el símbolo de numero",
"description": [
"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."
]
},
"pt-br": {
"title": "Crie Links Inativos com o Símbolo Cerquilha",
"description": [
"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."
]
},
"ru": {
"title": "Создайте мёртвые ссылки используя хэш-символ",
"description": [
"Иногда вам нужно добавить элементы a к вашему сайту до того, как вы знаете куда будут вести ссылки.",
"Также это может оказаться полезно, когда вы меняете поведение ссылки используя jQuery, что мы изучим позже.",
"Замените значение атрибута href вашего элемента a на #, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08820",
"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\" alt=\"Three kittens running towards the camera. \"></a>",
"Remember to use # as your a element's href property in order to turn it into a dead link.",
"Place the existing image element within an anchor element.",
"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",
"challengeType": 0,
"translations": {
"de": {
"title": "Verlinke ein Bild",
"description": [
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.",
"Umschließe 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 # 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."
]
},
"es": {
"title": "Convierte una imagen en un vínculo",
"description": [
"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 ."
]
},
"pt-br": {
"title": "Transforme uma Imagem em um Link",
"description": [
"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."
]
},
"ru": {
"title": "Превратите изображение в ссылку",
"description": [
"Вы можете превратить элементы в ссылки путём их вложения внутрь элементов a.",
"Вложите ваше изображение в элемент a. Вот пример:",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>",
"Не забывайте использовать # в качестве значения атрибута href вашего элемента a для превращения ссылки в мёртвую.",
"Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08827",
"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",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle eine ungeordnete Liste",
"description": [
"HTML hat ein spezielles Element zum Erstellen von unordered lists (ungeordneten Listen).",
"Ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.",
"Zum Beispiel:",
"<ul>", "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.", "Entferne die letzten zwei
<li>Milch</li>
<li>Käse</li>
</ul>
p Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite"
]
},
"es": {
"title": "Crea una lista no ordenada con viñetas",
"description": [
"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."
]
},
"pt-br": {
"title": "Crie uma Lista Não Ordenada com Marcadores",
"description": [
"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."
]
},
"ru": {
"title": "Создайте ненумерованный неупорядоченный список",
"description": [
"В HTML есть специальный элемент для создания неупорядоченного списка, или списка с точками в виде меток элементов.",
"Неупорядоченные списки начинаются с элемента <ul>. Затем они содержат некоторе количество элементов <li>.",
"Например: ",
"<ul>", "создаст ненумерованный список из \"milk\" и \"cheese\".", "Удалите последние два элемента
<li>milk</li>
<li>cheese</li>
</ul>
p и создайте неупорядоченный список из трёх вещей, которые любят кошки."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08828",
"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((/Top 3 things cats hate:/i).test($(\"ol\").prev().text()), 'message: You should have an ordered list for \"Top 3 things cats hate:\"');", "assert((/Things cats love:/i).test($(\"ul\").prev().text()), 'message: You should have an unordered list for \"Things cats love:\"');", "assert.equal($(\"ul li\").length, 3, 'message: You should have threeli elements within your ul element.');",
"assert.equal($(\"ol li\").length, 3, '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",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle eine geordnete Liste",
"description": [
"HTML beinhaltet ein spezielles Element für ordered lists (geordnete Listen).",
"Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.",
"Zum Beispiel:",
"<ol>", "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.", "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen." ] }, "es": { "title": "Crear una lista ordenada", "description": [ "HTML tiene un elemento especial para la creación de
<li>Garfield</li>
<li>Sylvester</li>
</ol>
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." ] }, "pt-br": { "title": "Crie uma Lista Ordenada", "description": [ "O HTML possui um elemento especial para a criação de
<li>Garfield</li>
<li>Sylvester</li>
</ol>
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."
]
},
"ru": {
"title": "Создайте упорядоченный список",
"description": [
"В HTML есть специальный элемент для создания упорядоченных списков, или списков с номерами в качестве меток элементов.",
"Упорядоченные списки начинаются с элемента <ol>. Далее они содержат некоторое количество элементов <li>.",
"Например:",
"<ol>", "создаст нумерованный список из \"Garfield\" и \"Sylvester\".", "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят." ] } } }, { "id": "bad87fee1348bd9aedf08829", "title": "Create a Text Field", "description": [ "Now let's create a web form.", "Text inputs are a convenient way to get input from your user.", "You can create one like this:", "
<li>Garfield</li>
<li>Sylvester</li>
</ol>
<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",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle ein Textfeld",
"description": [
"Nun erstellen wir ein Web Formular.",
"Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.",
"So kannst du eines erstellen:",
"<input type=\"text\">",
"Beachte, dass input Elemente selbstschließend sind.",
"Erstelle ein input Element des Typ (\"type\") text unter deinen Listen."
]
},
"es": {
"title": "Crea un campo de texto",
"description": [
"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."
]
},
"pt-br": {
"title": "Crie um Campo de Texto",
"description": [
"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:",
"<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."
]
},
"ru": {
"title": "Создайте текстовое поле",
"description": [
"Теперь давайте создадим web-форму.",
"Поля текстового ввода - удобный способ получения данных от пользователя.",
"Вы можете создать текстовое поле следующим образом:",
"<input type=\"text\">",
"Обратите внимание, что элементы input самозакрывающиеся.",
"Создайте элемент input типа text под вашими списками."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08830",
"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 to the existing 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(/input element should have valid syntax.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Füge Platzhalter zu einem Textfeld hinzu",
"description": [
"Platzhaltertexte erscheinen in deinen input Feldern, bevor der Nutzer etwas eingibt.",
"Du kannst Platzhalter auf folgende Weise erstellen:",
"<input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">",
"Setze bei deinem input Element den Wert für placeholder auf \"cat photo URL\"."
]
},
"es": {
"title": "Agrega un texto de relleno a un campo de texto",
"description": [
"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\"."
]
},
"pt-br": {
"title": "Adicione Texto Indicativo a um Campo de Texto",
"description": [
"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\"."
]
},
"ru": {
"title": "Добавьте замещающий текст к текстовому полю",
"description": [
"Ваш замещающий текст - это то, что отображается в виде текста внутри input пока пользователь не ввёл туда что-либо.",
"Вы можете создать замещающий текст следующим образом:",
"<input type=\"text\" placeholder=\"это замещающий текст\">",
"Установите значение атрибута placeholder вашего текстового поля input равными \"cat photo URL\"."
]
}
}
},
{
"id": "bad87fee1348bd9aede08830",
"title": "Create a Form Element",
"description": [
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your 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(/