2195 lines
155 KiB
JSON
2195 lines
155 KiB
JSON
{
|
||
"name": "Basic HTML and HTML5",
|
||
"order": 0,
|
||
"time": "5 hours",
|
||
"helpRoom": "Help",
|
||
"challenges": [
|
||
{
|
||
"id": "560add10cb82ac38a17513be",
|
||
"title": "Learn How freeCodeCamp Works",
|
||
"description": [
|
||
[
|
||
"",
|
||
"",
|
||
"Welcome to freeCodeCamp! <br><br>Check out the lesson map on the left. We have thousands of coding lessons to help you improve your skills. <br><br>You can earn verified certificates by completing certificate's 5 required projects.<br><br>And yes - all of this is 100% free, thanks to the thousands of campers who donate to our nonprofit.",
|
||
""
|
||
]
|
||
],
|
||
"challengeSeed": [],
|
||
"tests": [],
|
||
"type": "Waypoint",
|
||
"challengeType": 7
|
||
},
|
||
{
|
||
"id": "bd7123c8c441eddfaeb5bdef",
|
||
"title": "Say Hello to HTML Elements",
|
||
"description": [
|
||
"Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.",
|
||
"First, you'll start by building a simple web page using HTML. You can edit <code>code</code> in your <code>code editor</code>, which is embedded into this web page.",
|
||
"Do you see the code in your code editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.",
|
||
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.",
|
||
"Opening tags look like this:",
|
||
"<code><h1></code>",
|
||
"Closing tags look like this:",
|
||
"<code></h1></code>",
|
||
"The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.",
|
||
"Each challenge has tests you can run at any time by clicking the \"Run tests\" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.",
|
||
"<hr>",
|
||
"To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\"."
|
||
],
|
||
"challengeSeed": ["<h1>Hello</h1>"],
|
||
"tests": [
|
||
{
|
||
"text":
|
||
"Your <code>h1</code> element should have the text \"Hello World\".",
|
||
"testString":
|
||
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
|
||
}
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Willkommen bei deiner ersten Programmier-Challenge von freeCodeCamp!",
|
||
"Mithilfe des eingebauten <code>code editors</code> kannst du den <code>code</code> bearbeiten.",
|
||
"Siehst du den Code <code><h1>Hallo</h1></code> im Editor? Das ist ein HTML <code>element</code>",
|
||
"Die meisten HTML Elemente haben einen <code>opening tag</code> und einen <code>closing tag</code>.",
|
||
"Öffnende Tags sehen so aus:",
|
||
"<code><h1></code>",
|
||
"Schließende Tags so:",
|
||
"<code></h1></code>",
|
||
"Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, dass bei schließenden 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.",
|
||
"<hr>",
|
||
"Um den Test dieser Challenge zu bestehen, ändere den Text deines <code>h1</code> 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 freeCodeCamp.",
|
||
"Vous pouvez modifier le <code>code</code> dans votre <code>éditeur texte</code>, lequel est disponible dans cette page.",
|
||
"Voyez-vous le code dans l'éditeur texte qui dit <code><h1>Hello</h1></code>? C'est un <code>élément</code> HTML.",
|
||
"La plupart des éléments HTML ont une <code>balise ouvrante</code> et une <code>balise fermante</code>",
|
||
"Les balises ouvrantes ont cette apparence :",
|
||
"<code><h1></code>",
|
||
"Les balises fermantes ont cette apparence :",
|
||
"<code></h1></code>",
|
||
"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.",
|
||
"<hr>",
|
||
"Pour réussir le test de ce défi, changez le texte de l'élément <code>h1</code> pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Diga oi para os elementos HTML",
|
||
"description": [
|
||
"Bem-vindo(a) aos desafios de programação do freeCodeCamp. Eles vão te guiar pelo desenvolvimento web passo a passo.",
|
||
"Nós recomendamos que você os resolva em ordem, mas fique à vontade para navegar pelos desafios clicando em \"map\" no menu acima.",
|
||
"Além disso, se você quiser salvar seu progresso, você deve entrar para nossa comunidade criando uma conta. Em apenas alguns minutos, você pode entrar na nossa sala de chat, fórum e até mesmo em um grupo de estudos da sua cidade.",
|
||
"Primeiramente, você vai começar construindo uma página da web simples com HTML. Você pode editar o <code>código</code> no seu <code>editor de texto</code>, que está embutido nessa página.",
|
||
"Você está vendo o código no seu editor de texto que contém <code><h1>Hello</h1></code>? Esse é um <code>elemento</code> HTML.",
|
||
"A maioria dos elementos HTML têm uma <code>tag de abertura</code> e uma <code>tag de fechamento</code>.",
|
||
"As tags de abertura são assim:",
|
||
"<code><h1></code>",
|
||
"As tags de fechamento são assim:",
|
||
"<code></h1></code>",
|
||
"A única diferença entre tags de abertura e fechamento é que as tags de fechamento possuem uma barra (/) depois do sinal de menor (<).",
|
||
"Cada desafio possui testes que você pode rodar a qualquer momento clicando no botão \"Run tests\". Quando seu código passar em todos os testes, você poderá enviar sua solução e avançar para o próximo desafio.",
|
||
"<hr>",
|
||
"Para passar no teste desse desafio, mude o texto do seu elemento <code>h1</code> para \"Hello World\"."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Скажи привет HTML-элементам",
|
||
"description": [
|
||
"Добро пожаловать на первое программное испытание freeCodeCamp.",
|
||
"Вы можете редактировать <code>код</code> в вашем <code>текстовом редакторе</code>, который мы встроили в эту web-страницу.",
|
||
"Видите этот код в вашем текстовом редакторе: <code><h1>Hello</h1></code>? Это HTML <code>элемент</code>.",
|
||
"Большинство HTML-элементов имеют <code>открывающую метку</code> <code>закрывающую метку</code>.",
|
||
"Открывающие метки выглядят так:",
|
||
"<code><h1></code>",
|
||
"Закрывающие метки выглядят следующим образом:",
|
||
"<code></h1></code>",
|
||
"Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.",
|
||
"Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.",
|
||
"<hr>",
|
||
"Для прохождения этого испытания измените текст элемента <code>h1</code> с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf0887a",
|
||
"title": "Headline with the h2 Element",
|
||
"description": [
|
||
"Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.",
|
||
"The <code>h2</code> element you will be adding in this step will add a level two heading to the web page.",
|
||
"This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different levels of subheadings.",
|
||
"<hr>",
|
||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
|
||
],
|
||
"challengeSeed": ["<h1>Hello World</h1>"],
|
||
"tests": [
|
||
"assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.');",
|
||
"assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.');",
|
||
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your <code>h2</code> element should have the text \"CatPhotoApp\".');",
|
||
"assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your <code>h1</code> element should have the text \"Hello World\".');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:",
|
||
"<a href=\"https://i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/jOc1JF1.png\" title=\"Klicke zum Vergrößern\" alt=\"Ein Screenshot von unserer beendeted Katzenfoto App\"></a>",
|
||
"Das eingetragene <code>h2</code> Element wird ein <code>h2</code> Element auf der Website erzeugen.",
|
||
"Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. <code>h1</code> Elemente werden oft für Hauptüberschriften verwendet, während <code>h2</code> Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch <code>h3</code>, <code>h4</code>, <code>h5</code> und <code>h6</code> Elemente die verschiedene und neue Bereiche kennzeichnen.",
|
||
"<hr>",
|
||
"Füge unter <code>h1</code> \"Hello World\" ein zweites HTML Element <code>h2</code> 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 :",
|
||
"<a href=\"https://i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/jOc1JF1.png\" title=\"Cliquez pour agrandir\" alt=\"Une capture écran de notre application de photo de chats\"></a>",
|
||
"L'élément <code>h2</code> que vous entrerez créera un élément <code>h2</code> sur le site.",
|
||
"Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments <code>h1</code> sont souvent utilisés comme titre, tandis que les éléments <code>h2</code> sont généralement utilisés comme sous-titres. Il existe également les éléments <code>h3</code>, <code>h4</code>, <code>h5</code> et <code>h6</code> qui indiquent une nouvelle et différente section.",
|
||
"<hr>",
|
||
"Ajoutez une balise <code>h2</code> contenant \"CatPhotoApp\" pour créer un second <code>élément</code> HTML sous l'élément <code>h1</code> contenant \"Hello World\"."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Título com o elemento h2",
|
||
"description": [
|
||
"Nas próximas duas seções, nós vamos construir um app HTML5 que vai ficar mais ou menos assim:",
|
||
"<a href=\"https://i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/jOc1JF1.png\" title=\"Clique para ampliar\" alt=\"Um screenshot do app de fotos de gatos terminado\"></a>",
|
||
"O elemento <code>h2</code> que você vai adicionar vai criar um elemento <code>h2</code> na página.",
|
||
"Esse elemento indica ao navegador a estrutura do seu site. Elementos <code>h1</code> são geralmente usados para os títulos principais, enquanto elementos <code>h2</code> são usados para subtítulos. Também existem os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>, que indicam seções novas e diferentes.",
|
||
"<hr>",
|
||
"Adicione uma tag <code>h2</code> com o texto \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo do seu elemento <code>h1</code> com o texto \"Hello World\"."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Заголовок с применением элемента h2",
|
||
"description": [
|
||
"В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:",
|
||
"<a href=\"https://i.imgur.com/jOc1JF1.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
|
||
"Вводимый вами элемент <code>h2</code> создаст соответствующий элемент <code>h2</code> на web-странице.",
|
||
"Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы <code>h1</code> часто применяют в качестве главных заголовков, в то время как элементы <code>h2</code> обычно используют для обозначения позаголовков. Также существуют элементы <code>h3</code>, <code>h4</code>, <code>h5</code> и <code>h6</code> для обозначения отдельных секций.",
|
||
"<hr>",
|
||
"Добавьте метку <code>h2</code> с текстом \"CatPhotoApp\" для создания второго HTML <code>элемента</code> под вашим элементом <code>h1</code> с текстом \"Hello World\"."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08801",
|
||
"title": "Inform with the Paragraph Element",
|
||
"description": [
|
||
"<code>p</code> elements are the preferred element for paragraph text on websites. <code>p</code> is short for \"paragraph\".",
|
||
"You can create a paragraph element like this:",
|
||
"<code><p>I'm a p tag!</p></code>",
|
||
"<hr>",
|
||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
|
||
],
|
||
"challengeSeed": ["<h1>Hello World</h1>", "<h2>CatPhotoApp</h2>"],
|
||
"tests": [
|
||
"assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.');",
|
||
"assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should have the text \"Hello Paragraph\".');",
|
||
"assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure your <code>p</code> element has a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"<code>p</code> Elemente sind das bevorzugte Element für normale Paragraphentexte auf einer Website. P ist die Abkürzung für \"Paragraph\".",
|
||
"Du kannst ein <code>p</code> Element so erzeugen:",
|
||
"<code><p>Ich bin ein p Element!</p></code>",
|
||
"<hr>",
|
||
"Erstelle ein <code>p</code> Element unter deinem <code>h2</code> Element und füge den Text \"Hello Paragraph\" ein."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Informez avec l'élément paragraphe",
|
||
"description": [
|
||
"L'élément <code>p</code> 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 <code>p</code> comme ceci :",
|
||
"<code><p>Je suis une balise p!</p></code>",
|
||
"<hr>",
|
||
"Créez un élément <code>p</code> sous votre élément <code>h2</code> et inscrivez-y le texte \"Hello Paragraph\"."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Informe com o elemento de parágrafo",
|
||
"description": [
|
||
"Elementos <code>p</code> são os elementos preferenciais para parágrafos de texto de tamanho normal em sites. P é a abreviação de \"parágrafo\".",
|
||
"Você pode criar um elemento <code>p</code> assim:",
|
||
"<code><p>Eu sou uma tag p!</p></code>",
|
||
"<hr>",
|
||
"Crie um elemento <code>p</code> abaixo do seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Проинформируйте с применением элемента p",
|
||
"description": [
|
||
"Элементы <code>p</code> предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".",
|
||
"Вы можете создать элемент <code>p</code> следующим образом:",
|
||
"<code><p>Я метка p!</p></code>",
|
||
"<hr>",
|
||
"Создайте элемент <code>p</code> под вашим элементом <code>h2</code> и присвойте ему текст \"Hello Paragraph\"."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08833",
|
||
"title": "Fill in the Blank with Placeholder Text",
|
||
"description": [
|
||
"Web developers traditionally use <code>lorem ipsum text</code> 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 <code>kitty ipsum text</code>.",
|
||
"<hr>",
|
||
"Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Hello Paragraph</p>"
|
||
],
|
||
"tests": [
|
||
"assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');"
|
||
],
|
||
"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. Diese Tradition setzt sich im Web fort.",
|
||
"Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber <code>kitty ipsum text</code> nutzen.",
|
||
"<hr>",
|
||
"Ersetze den Text in deinem <code>p</code> Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Remplissez les blancs avec du faux-texte",
|
||
"description": [
|
||
"Les développeurs Web utilisent traditionnellement du <code>lorem ipsum</code> 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<sup>ème</sup> 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 <code>Kitty ipsum</code>.",
|
||
"<hr>",
|
||
"Remplacez le texte à l'intérieur des éléments <code>p</code> avec ces quelques mots du texte Kitty ipsum : <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Preencha o vazio com texto de exemplo",
|
||
"description": [
|
||
"Desenvolvedores web tradicionalmente usam <code>lorem ipsum</code> como texto de exemplo. Os textos 'lorem ipsum' são partes retiradas aleatoriamente de uma passagem famosa escrita por Cícero na Roma Antiga.",
|
||
"Esses textos têm sido usados como texto de exemplo por tipógrafos desde o século 16, e essa tradição continua na web.",
|
||
"Bem, 5 séculos é tempo suficiente. Já que estamos construindo um app de fotos de gatos, vamos usar um novo texto chamado de <code>gatinho ipsum</code>.",
|
||
"<hr>",
|
||
"Substitua o texto dentro do seu elemento <code>p</code> com as primeiras palavras desse gatinho ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Заполните пустоты замещающим текстом",
|
||
"description": [
|
||
"Традиционно web-разработчики используют текст <code>lorem ipsum</code> в качестве замещающего текста. Он называется тектсом <code>lorem ipsum</code> по первым двум словам известного пассажа Цицерона из Древнего Рима.",
|
||
"Текст <code>lorem ipsum</code> применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.",
|
||
"5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом <code>kitty ipsum</code>.",
|
||
"<hr>",
|
||
"Замените текст внутри вашего элемента <code>p</code> первыми двумя словами текста <code>kitty ipsum</code>: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08802",
|
||
"title": "Uncomment HTML",
|
||
"description": [
|
||
"Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed the end user.",
|
||
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
|
||
"Comments in HTML starts with <code><!--</code>, and ends with a <code>--></code>",
|
||
"<hr>",
|
||
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
|
||
],
|
||
"challengeSeed": [
|
||
"<!--",
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"-->"
|
||
],
|
||
"tests": [
|
||
"assert($(\"h1\").length > 0, 'message: Make your <code>h1</code> element visible on your page by uncommenting it.');",
|
||
"assert($(\"h2\").length > 0, 'message: Make your <code>h2</code> element visible on your page by uncommenting it.');",
|
||
"assert($(\"p\").length > 0, 'message: Make your <code>p</code> element visible on your page by uncommenting it.');",
|
||
"assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\\n/g,'')), 'message: Be sure to delete all trailing comment tags, i.e. <code>--></code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Kommentieren erlaubt es dir, Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.",
|
||
"Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.",
|
||
"Du kannst einen Kommentar mit <code><!--</code> starten und ihn mit <code>--></code> wieder beenden.",
|
||
"<hr>",
|
||
"Entkommentiere deine <code>h1</code>, <code>h2</code> und <code>p</code> Elemente."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Décommenter du HTML",
|
||
"description": [
|
||
"Commenter est une façon de laisser des commentaires dans votre code sans affecter le fonctionnement du code.",
|
||
"Commenter est aussi un moyen pratique de rendre du code inactif sans devoir le supprimer entièrement.",
|
||
"Vous pouvez débuter un commentaire avec <code><!--</code> et le terminer avec <code>--></code>.",
|
||
"<hr>",
|
||
"Décommenter vos éléments <code>h1</code>, <code>h2</code> et <code>p</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Descomente o HTML",
|
||
"description": [
|
||
"Comentar é uma forma de deixar comentários no meio do seu código sem afetar o código em si.",
|
||
"Comentar também é uma forma conveniente de deixar uma parte do código inativa sem ter que deletá-la completamente.",
|
||
"Você pode começar um comentário com <code><!--</code> e terminá-lo com <code>--></code>",
|
||
"<hr>",
|
||
"Descomente seus elementos <code>h1</code>, <code>h2</code> e <code>p</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Раскомментируйте HTML",
|
||
"description": [
|
||
"Комментирование - способ хранения заметок по коду без воздействия на сам код.",
|
||
"Также комментирование - неплохой метод отключения части кода без необходимости его удаления.",
|
||
"Вы можете начать комментарий с <code><!--</code> и закончить его <code>--></code>",
|
||
"<hr>",
|
||
"Раскомментируйте свои элементы <code>h1</code>, <code>h2</code> и <code>p</code>."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08804",
|
||
"title": "Comment out HTML",
|
||
"description": [
|
||
"Remember that in order to start a comment, you need to use <code><!--</code> and to end a comment, you need to use <code>--></code>",
|
||
"Here you'll need to end the comment before your <code>h2</code> element begins.",
|
||
"<hr>",
|
||
"Comment out your <code>h1</code> element and your <code>p</code> element, but not your <code>h2</code> element."
|
||
],
|
||
"challengeSeed": [
|
||
"<!--",
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"-->"
|
||
],
|
||
"tests": [
|
||
"assert(($(\"h1\").length === 0), 'message: Comment out your <code>h1</code> element so that it is not visible on your page.');",
|
||
"assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element uncommented so that it is visible on your page.');",
|
||
"assert(($(\"p\").length === 0), 'message: Comment out your <code>p</code> element so that it is not visible on your page.');",
|
||
"assert(code.match(/[^fc]-->/g).length > 1, 'message: Be sure to close each of your comments with <code>--></code>.');",
|
||
"assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"<h1>\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"<h2>\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"<p>\") , 'message: Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Denk daran, dass ein Kommentar mit <code><!--</code> beginnt und mit <code>--></code> endet.",
|
||
"Hier wirst du deinen Kommentar vor dem <code>h2</code> Element beenden müssen.",
|
||
"<hr>",
|
||
"Kommentiere die <code>h1</code> und <code>p</code> Elemente aus, aber lasse dein <code>h2</code> Element unkommentiert."
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Commentez du HTML",
|
||
"description": [
|
||
"Souvenez-vous que pour débuter un commentaire, vous devez utiliser <code><!--</code> et que pour le terminer, vous devez utiliser <code>--></code>.",
|
||
"Ici vous devrez terminer le commentaire juste avant que l'élément <code>h2</code> commence.",
|
||
"<hr>",
|
||
"Commentez les éléments <code>h1</code> et <code>p</code>, mais laissez l'élément <code>h2</code> tel quel."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Comente o HTML",
|
||
"description": [
|
||
"Lembre-se de que, para começar um comentário, você precisa usar <code><!--</code> e para terminá-lo, você precisa usar <code>--></code>",
|
||
"Aqui, você vai precisar terminar o comentário antes do começo do seu elemento <code>h2</code>.",
|
||
"<hr>",
|
||
"Comente seus elementos <code>h1</code> e <code>p</code>, mas deixe seu elemento <code>h2</code> descomentado."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Закомментируйте HTML",
|
||
"description": [
|
||
"Помните, что для начала комментария вам необходимо использовать <code><!--</code>, а для завершения комментария - <code>--></code>",
|
||
"Тут вам необходимо завершить комментарий до начала вашего элемента <code>h2</code>.",
|
||
"<hr>",
|
||
"Закомментируйте ваши элементы <code>h1</code> и <code>p</code>, но оставьте ваш элемент <code>h2</code> раскомментированным."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fed1348bd9aedf08833",
|
||
"title": "Delete HTML Elements",
|
||
"description": [
|
||
"Our phone doesn't have much vertical space.",
|
||
"Let's remove the unnecessary elements so we can start building our CatPhotoApp.",
|
||
"<hr>",
|
||
"Delete your <code>h1</code> element so we can simplify our view."
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"tests": [
|
||
"assert(($(\"h1\").length == 0), 'message: Delete your <code>h1</code> element.');",
|
||
"assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element on the page.');",
|
||
"assert(($(\"p\").length > 0), 'message: Leave your <code>p</code> element on the page.');"
|
||
],
|
||
"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.",
|
||
"<hr>",
|
||
"Lösche die Elemente <code>h1</code>, um etwas Ordnung zu 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.",
|
||
"<hr>",
|
||
"Supprimez l'élément <code>h1</code> afin de simplifier l'affichage."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Delete elementos HTML",
|
||
"description": [
|
||
"Nosso celular não tem muito espaço vertical.",
|
||
"Vamos remover os elementos desnecessários para podermos começar a construir nosso app de fotos de gatinhos.",
|
||
"<hr>",
|
||
"Delete seu elemento <code>h1</code> para podermos simplificar nossa tela."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Удалите HTML-элементы",
|
||
"description": [
|
||
"Наш телефон не очень большой по-вертикали.",
|
||
"Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.",
|
||
"<hr>",
|
||
"Удалите ваш <code>h1</code> элемент, чтобы упростить общий вид."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aecf08801",
|
||
"title": "Introduction to HTML5 Elements",
|
||
"description": [
|
||
"HTML5 introduces more descriptive HTML tags. These include <code>header</code>, <code>footer</code>, <code>nav</code>, <code>video</code>, <code>article</code>, <code>section</code> and others.",
|
||
"These tags make your HTML easier to read, and also help with Search Engine Optimization (SEO) and accessibility.",
|
||
"The <code>main</code> HTML5 tag helps search engines and other developers find the main content of your page.",
|
||
"<strong>Note</strong><br>Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.",
|
||
"<hr>",
|
||
"Create a second <code>p</code> element after the existing <code>p</code> element with the following kitty ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||
"Wrap the paragraphs with an opening and closing <code>main</code> tag."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"p\").length > 1, 'message: You need 2 <code>p</code> elements with Kitty Ipsum text.');",
|
||
"assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
|
||
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.');",
|
||
"assert($('main').length === 1, 'message: Your code should have one <code>main</code> element.');",
|
||
"assert($(\"main\").children(\"p\").length === 2, 'message: The <code>main</code> element should have two paragraph elements as children.');",
|
||
"assert(code.match(/<main>\\s*?<p>/g), 'message: The opening <code>main</code> tag should come before the first paragraph tag.');",
|
||
"assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'message: The closing <code>main</code> tag should come after the second closing paragraph tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"pt-br": {
|
||
"title": "Introdução aos elementos HTML5",
|
||
"description": [
|
||
"O HTML5 introduziu tags mais descritivas, como <code>header</code> (cabeçalho), <code>footer</code> (rodapé), <code>nav</code> (navegação), <code>video</code> (vídeo), <code>article</code> (artigo), <code>section</code> (seção), entre outras.",
|
||
"Essas tags deixam seu HTML mais fácil de ler e também ajudam na otimização para motores de busca (SEO) e acessibilidade.",
|
||
"A tag HTML5 <code>main</code> (principal) ajuda mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal da sua página.",
|
||
"<strong>Nota</strong><br>Várias das novas tags HTML5 e seus benefícios são discutidos na seção de Acessibilidade aplicada.",
|
||
"<hr>",
|
||
"Crie um segundo elemento <code>p</code> depois dos elementos <code>p</code> existentes com o seguinte texto gatinho ipsum: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||
"Coloque tags <code>main</code> de abertura e fechamento ao redor dos parágrafos."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08812",
|
||
"title": "Add Images to Your Website",
|
||
"description": [
|
||
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
|
||
"An example of this would be:",
|
||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\" /></code>",
|
||
"Note that in most cases, <code>img</code> elements are self-closing.",
|
||
"All <code>img</code> elements <strong>must</strong> have an <code>alt</code> attribute. The text inside an <code>alt</code> attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
|
||
"Note: If the image is purely decorative, using an empty <code>alt</code> attribute is a best practice.",
|
||
"Ideally the <code>alt</code> attribute should not contain special characters unless needed.",
|
||
"Let's add an <code>alt</code> attribute to our <code>img</code> example above:",
|
||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\" /></code>",
|
||
"<hr>",
|
||
"Let's try to add an image to our website:",
|
||
"Insert an <code>img</code> tag, before the <code>h2</code> element.",
|
||
"Now set the <code>src</code> attribute so that it points to this url:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>",
|
||
"Finally don't forget to give your image an <code>alt</code> text."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" ",
|
||
" ",
|
||
" <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
|
||
"</main>"
|
||
],
|
||
"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 a <code>src</code> attribute that points to the kitten image.');",
|
||
"assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element <strong>must</strong> have an <code>alt</code> attribute.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"description": [
|
||
"Du kannst <code>img</code> Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das <code>src</code> Attribut.",
|
||
"Ein Beispiel dafür wäre:",
|
||
"<code><img src=\"https://www.deine-bild-quelle.com/dein-bild.jpg\"></code>",
|
||
"Beachte, dass <code>img<code> Elemente in den meisten Fällen selbstschließend sind.",
|
||
"<hr>",
|
||
"Versuche es mit diesem Bild:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
]
|
||
},
|
||
"fr": {
|
||
"title": "Ajouter des images à votre site Web",
|
||
"description": [
|
||
"Vous pouvez ajouter des images à votre site Web en utilisant l'élément <code>img</code> et pointer vers une URL d'image spécifique en utilisant l'attribut <code>src</code>.",
|
||
"Un exemple de cette procédure serait :",
|
||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||
"Note that in most cases, <code>img</code> elements are self-closing.",
|
||
"Prenez note que dans la plupart des cas, les éléments <code>img</code> sont auto-fermants.",
|
||
"<hr>",
|
||
"Essayez avec cette image :",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Adicione imagens à sua página web",
|
||
"description": [
|
||
"Você pode adicionar imagens ao seu site usando o elemento <code>img</code> e apontando para a URL de uma imagem específica no atributo <code>src</code>.",
|
||
"Um exemplo disso seria:",
|
||
"<code><img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\"></code>",
|
||
"Note que na maioria dos casos, elementos <code>img</code> possuem auto-fechamento (não precisam de tag de fechamento).",
|
||
"Todos os elementos <code>img</code> <strong>devem</strong> ter um atributo <code>alt</code>. O texto do atributo <code>alt</code> é usado por leitores de tela para melhorar a acessibilidade e é mostrado no lugar da imagem se ela não puder ser carregada.",
|
||
"Vamos adicionar um atributo <code>alt</code> ao nosso exemplo acima:",
|
||
"<code><img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\" alt=\"Autor numa praia fazendo joinha.\"></code>",
|
||
"<hr>",
|
||
"Vamos tentar adicionar uma imagem ao nosso site:",
|
||
"Insira uma tag <code>img</code>, antes do elemento <code>h2</code>.",
|
||
"Agora coloque essa URL no seu atributo <code>src</code>:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>",
|
||
"Finalmente, não esqueça de dar à sua imagem um texto <code>alt</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Добавьте изображения к вашему сайту",
|
||
"description": [
|
||
"Вы можете добавлять изображения к вашему сайту с помощью элемента <code>img</code> и указывать ссылки определённых изображений с помощтю атрибута <code>src</code>.",
|
||
"Примером добавления мзображения может служить:",
|
||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||
"Обратите внимание, что в большинстве случаев элементы <code>img</code> являются самозакрывающимися.",
|
||
"<hr>",
|
||
"Попробуйте добавить изображение используя следующую ссылку:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
]
|
||
}
|
||
},
|
||
"guideUrl":
|
||
"https://guide.freecodecamp.org/certificates/add-images-to-your-website"
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08816",
|
||
"title": "Link to External Pages with Anchor Elements",
|
||
"description": [
|
||
"You can use <code>anchor</code> elements to link to content outside of your web page.",
|
||
"<code>anchor</code> elements need a destination web address called an <code>href</code> attribute. They also need anchor text. Here's an example:",
|
||
"<code><a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a></code>",
|
||
"Then your browser will display the text <strong>\"this links to freecodecamp.org\"</strong> as a link you can click. And that link will take you to the web address <strong>https://www.freecodecamp.org</strong>.",
|
||
"<hr>",
|
||
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" ",
|
||
" ",
|
||
" ",
|
||
" <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
|
||
" ",
|
||
" <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert((/cat photos/gi).test($(\"a\").text()), 'message: Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".');",
|
||
"assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an <code>a</code> element that links to <code>http://freecatphotoapp<wbr>.com</code>');",
|
||
"assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure your <code>a</code> element has a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Verlinke externe Seiten mit Anker Elementen",
|
||
"description": [
|
||
"<code>a</code> Elemente, auch bekannt als <code>anchor</code> (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verweisen.",
|
||
"So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
|
||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"Eine Darstellung wie man Anker Elemente mit dem gleichen Text wie in der folgenden Zeile erstellt\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
|
||
"Hier ist ein Beispiel:",
|
||
"<code><p>Hier ist ein <a href=\"http://freecodecamp.org\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p></code>",
|
||
"<hr>",
|
||
"Erstelle ein <code>a</code> Element, das auf <code>http://freecatphotoapp.com</code> verweist und den \"cat photos\" als <code>anchor text</code> (Link-Text) beinhaltet."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Enlaza páginas externas con elementos ancla",
|
||
"description": [
|
||
"Los elementos <code>a</code>, también conocidos como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
|
||
"Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
|
||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"https://i.imgur.com/hviuZwe.png\"></a> ",
|
||
"He aquí un ejemplo:",
|
||
"<code><p>Aquí está un <a href=\"https://freecodecamp.org\"> enlace a freeCodeCamp</a> para que lo sigas.</p></code>",
|
||
"<hr>",
|
||
"Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de ancla</code> \"fotos de gatos\"."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie links para páginas externas com elementos âncora",
|
||
"description": [
|
||
"Elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são usados para criar links para conteúdo de fora da página atual.",
|
||
"Aqui está um diagrama de um elemento <code>a</code>. Nesse caso, o elemento <code>a</code> é usado no meio de um elemento de parágrafo, o que significa que esse link vai aparecer no meio de uma frase.",
|
||
"<a href=\"https://i.imgur.com/QSCIiNH.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"um diagrama de como tags âncora são compostas com o mesmo texto assim como na linha seguinte\" src=\"https://i.imgur.com/QSCIiNH.png\"></a>",
|
||
"Aqui está um exemplo:",
|
||
"<code><p>Aqui está um <a href=\"http://freecodecamp.org\"> link para o freecodecamp.org</a> para você clicar.</p></code>",
|
||
"<hr>",
|
||
"Crie um elemento <code>a</code> que vá para <code>http://freecatphotoapp.com</code> e tenha \"cat photos\" como seu <code>texto âncora</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Присоедините внешние страницы с помощью якорных элементов",
|
||
"description": [
|
||
"Элементы <code>a</code>, также известные как <code>якорные</code> элементы, применяют для связи с содержимым вне текущей страницы.",
|
||
"Вот диаграмма элемента <code>a</code>. В этом случае, элемент <code>a</code> использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.",
|
||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
|
||
"Вот пример:",
|
||
"<code><p>Вот <a href=\"http://freecodecamp.org\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p></code>",
|
||
"<hr>",
|
||
"Создайте элемент <code>a</code>, который присоединяет <code>http://freecatphotoapp.com</code> и имеет значение \"cat photos\" в качестве <code>текста якоря</code>."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad88fee1348bd9aedf08816",
|
||
"title": "Link to Internal Sections of a Page with Anchor Elements",
|
||
"description": [
|
||
"Anchor elements can also be used to create internal links to jump to different sections within a webpage.",
|
||
"To create an internal link, you assign a link's <code>href</code> attribute to a hash symbol <code>#</code> plus the value of the <code>id</code> attribute for the element that you want to internally link to, usually further down the page. You then need to add the same <code>id</code> attribute to the element you are linking to. An <code>id</code> is an attribute that uniquely describes an element.",
|
||
"Below is an example of an internal anchor link and its target element:",
|
||
"<blockquote><a href=\"#contacts-header\">Contacts</a><br>...<br><h2 id=\"contacts-header\">Contacts</h2></blockquote>",
|
||
"When users click the Contacts link, they'll be taken to the section of the webpage with the <b>Contacts</b> header element.",
|
||
"<hr>",
|
||
"Change your external link to an internal link by changing the <code>href</code> attribute to \"#footer\" and the text from \"cat photos\" to \"Jump to Bottom\".",
|
||
"Remove the <code>target=\"_blank\"</code> attribute from the anchor tag since this causes the linked document to open in a new window tab.",
|
||
"Then add an <code>id</code> attribute with a value of \"footer\" to the <code><footer></code> element at the bottom of the page."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" ",
|
||
" <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>",
|
||
" ",
|
||
" <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
|
||
" ",
|
||
" <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. 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.</p>",
|
||
" <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>",
|
||
" <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>",
|
||
" ",
|
||
"</main>",
|
||
" ",
|
||
"<footer>Copyright Cat Photo App</footer>"
|
||
],
|
||
"tests": [
|
||
"assert($('a').length == 1, 'message: There should be only one anchor tag on your page.');",
|
||
"assert($('footer').length == 1, 'message: There should be only one <code>footer</code> tag on your page.');",
|
||
"assert($('a').eq(0).attr('href') == \"#footer\", 'message: The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".');",
|
||
"assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'message: The <code>a</code> tag should not have a <code>target</code> attribute');",
|
||
"assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'message: The <code>a</code> text should be \"Jump to Bottom\".');",
|
||
"assert($('footer').eq(0).attr('id') == \"footer\", 'message: The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"pt-br": {
|
||
"title":
|
||
"Crie links para seções internas de uma página com elementos âncora",
|
||
"description": [
|
||
"Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.",
|
||
"O formato é parecido com um link externo, só que, ao invés de uma URL no atributo <code>href</code>, você usa o símbolo <code>#</code> e uma palavra para descrever a seção para a qual você quer pular.",
|
||
"Aqui está um exemplo:",
|
||
"<code><a href=\"#contact\">Ir para a seção de contato</a></code>",
|
||
"Em seguida, você precisa criar no seu HTML um elemento âncora correspondente no lugar em que você quer que seus usuários cheguem quando clicarem no seu link interno. Ao invés de usar o atributo <code>href</code>, você deve usar o atributo <code>name</code>. Aqui está um exemplo:",
|
||
"<blockquote><h1>Contato</h1><br><a name=\"contact\"></a></blockquote>",
|
||
"Agora, quando seus usuários clicarem no link \"Ir para a seção de contato\", eles serão levados para a seção da página em que está o elemento âncora que tenha \"contact\" no seu atributo <code>name</code>.",
|
||
"<hr>",
|
||
"Mude seu link externo para um link interno trocando seu atributo <code>href</code> para \"#bottom\" e o texto âncora de \"cat photos\" para \"Pular para o final\".",
|
||
"Então, adicione um elemento âncora com o atributo <code>name</code> como \"bottom\" depois do último parágrafo.",
|
||
"<strong>Nota</strong><br>Adicionamos mais texto gatinho ipsum para os parágrafos para mostrar melhor o efeito de clicar no link interno para pular para o final da página. Além disso, essa mudança só vai se aplicar para esse desafio. O próximo desafio vai voltar a mostrar seu link externo."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08817",
|
||
"title": "Nest an Anchor Element within a Paragraph",
|
||
"description": [
|
||
"You can nest links within other text elements.",
|
||
"<blockquote><p><br> Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.<br></p></blockquote>",
|
||
"Let's break down the example:",
|
||
"Normal text is wrapped in the <code>p</code> element:<br> <code><p> Here's a ... for you to follow. </p></code>",
|
||
"Next is the <code>anchor</code> element <code><a></code> (which requires a closing tag <code></a></code>):<br> <code><a> ... </a></code>",
|
||
"<code>href</code> is an anchor tag attribute that contains the URL address of the link:<br> <code><a href=\"http://freecodecamp.org\"> ... </a></code>",
|
||
"The text, <strong>\"link to freecodecamp.org\"</strong>, within the anchor element called <code>anchor text</code>, will display a link to click:<br> <code><a href=\" ... \">link to freecodecamp.org</a></code>",
|
||
"The final output of the example will look like this:<br><p>Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.</p>",
|
||
"<hr>",
|
||
"Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>main</code> element). The new paragraph should have text that says \"View more cat photos\", where \"cat photos\" is a link, and the rest of the text is plain text."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" ",
|
||
" <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>",
|
||
" ",
|
||
" <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
|
||
" ",
|
||
" <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'message: You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".');",
|
||
"assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your <code>a</code> element should have the anchor text of \"cat photos\"');",
|
||
"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.');",
|
||
"assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'message: Your <code>a</code> element should be nested within your new <code>p</code> element.');",
|
||
"assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'message: Your <code>p</code> element should have the text \"View more \" (with a space after it).');",
|
||
"assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your <code>a</code> element should <em>not</em> have the text \"View more\".');",
|
||
"assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
|
||
"assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Anker Element mit einem Paragraphen umschließen",
|
||
"description": [
|
||
"Hier ist nochmal ein Beispiel für ein <code>a</code> Element:",
|
||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Klick zum Vergrößern\" alt=\"Eine Darstellung wie Anker Elemente geschrieben werden mit dem gleichen Text wie in der folgenden Zeile\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
|
||
"Hier ist ein Beispiel:",
|
||
"<code><p>Hier ist ein <a href=\"https://freecodecamp.org\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p></code>",
|
||
"<code>Nesting</code> bedeutet, ein Element innerhalb eines anderen Elements zu schreiben",
|
||
"<hr>",
|
||
"Jetzt umschließe dein <code>a</code> Element mit einem neuen <code>p</code> Element (direkt nach dem bereits existierenden <code>main</code> 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 <code>a</code> para tu referencia:",
|
||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
|
||
"He aquí un ejemplo:",
|
||
"<code><p>Aquí hay un <a href=\"https://freecodecamp.org\"> enlace a freeCodeCamp</a> para que lo sigas.</p></code>",
|
||
"<code>Anidamiento</code> simplemente significa poner un elemento dentro de otro elemento.",
|
||
"<hr>",
|
||
"Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> (justo después del elemento <code>main</code> 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 um elemento âncora a um parágrafo",
|
||
"description": [
|
||
"Novamente, aqui está um diagrama de um elemento <code>a</code> para você usar como referência:",
|
||
"<a href=\"https://i.imgur.com/QSCIiNH.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"um diagrama de como tags âncora são compostas com o mesmo texto assim como na linha seguinte\" src=\"https://i.imgur.com/QSCIiNH.png\"></a>",
|
||
"Veja um exemplo:",
|
||
"<code><p>Aqui está um <a href=\"https://freecodecamp.org\"> link para o freeCodeCamp</a> para você clicar.</p></code>",
|
||
"<code>Aninhar</code> significa colocar um elemento dentro de outro.",
|
||
"<hr>",
|
||
"Agora, aninhe seu elemento <code>a</code> existente a um novo elemento <code>p</code> (logo em seguida do elemento <code>main</code> existente), de forma que o parágrafo ao redor tenha o texto \"View more cat photos\", mas apenas a parte \"cat photos\" seja um link e o resto seja apenas texto."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте вложенный якорный элемент внутри параграфа",
|
||
"description": [
|
||
"Вот диаграмма элемента <code>a</code>:",
|
||
"<a href=\"https://i.imgur.com/hviuZwe.png\" target=\"_blank\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://i.imgur.com/hviuZwe.png\"></a>",
|
||
"Вот пример:",
|
||
"<code><p>Вот <a href=\"https://freecodecamp.org\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p></code>",
|
||
"<code>Вложенность</code> значит установку одного элемента внутрь друго элемента.",
|
||
"<hr>",
|
||
"Теперь вложите ваш существующий элемент <code>a</code> внутрь нового элемента <code>p</code> (сразу после существующего элемента <code>main</code>) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "560add71cb82ac38a17513c2",
|
||
"title": "Join a freeCodeCamp Study Group in Your City",
|
||
"description": [
|
||
[
|
||
"",
|
||
"",
|
||
"You can code together with other campers in your city by joining a local freeCodeCamp study group. <br><br> Click the button below to open our study group directory. <br><br>Find your local study group and click it. This will take you to their Facebook group. <br><br>Click the <bold>Join group</bold> button. <br><br>You'll get a notification from Facebook once the group has accepted you. Then you can go back and introduce yourself. <br><br>If you don't have a Facebook account or don't want to code with other campers in your city, you can skip this step.",
|
||
"https://study-group-directory.freecodecamp.org/"
|
||
]
|
||
],
|
||
"challengeSeed": [],
|
||
"tests": [],
|
||
"type": "Waypoint",
|
||
"challengeType": 7,
|
||
"translations": {
|
||
"es": {
|
||
"title": "Únete a un Campamento en Tu Ciudad",
|
||
"description": [
|
||
[
|
||
"https://i.imgur.com/NAOFJWN.jpg",
|
||
"Una imagen de algunos de nuestros campistas compartiendo en un café local. 3 hombres y 3 mujeres están sentados alrededor de una mesa con portátiles afuera, y están sonriendo y programando.",
|
||
"Nuestros Campamentos te ayudan a programar con otros campistas en tu ciudad. Puedes coordinar grupos de estudio o atender eventos de programación locales juntos.",
|
||
""
|
||
],
|
||
[
|
||
"https://i.imgur.com/fTFMjwf.gif",
|
||
"Un gif mostrándote como puedes pulsar en el enlace inferior, encontrar tu ciudad en la lista de Campamentos, entonces haz clic en el enlace de Facebook para tu ciudad y unirte al grupo de Facebook de tu ciudad.",
|
||
"Encuentra tu ciudad en esta lista y haz clic en esta. Esto te llevara al grupo de Facebook del Campamento de tu ciudad. Da clic en el botón de \"Unirse al grupo\" para unirte a el grupo. Alguien del mismo campamento debería aprobarte en breve.",
|
||
"http://forum.freecodecamp.org/t/free-code-camp-city-based-local-groups/19574"
|
||
]
|
||
]
|
||
},
|
||
"de": {
|
||
"title": "Tritt einem Campsite in deiner Stadt bei",
|
||
"description": [
|
||
[
|
||
"https://i.imgur.com/XugIMb4.jpg",
|
||
"Ein Foto von einigen Campern bei einem Treffen in einem lokalen Cafe.",
|
||
"Unsere Campsites sind Facebook Gruppen die dir helfen dich mit anderen Campern aus deiner Stadt zu treffen. Du kannst diese Gruppen verwenden um an \"Coffee-and-Code\" Treffen, wo du andere Camper in einem Cafe triffst um gemeinsam zu programmieren, teilzunehmen oder zu organisieren",
|
||
""
|
||
],
|
||
[
|
||
"https://i.imgur.com/fTFMjwf.gif",
|
||
"Ein GIF das zeigt wie du auf den untenstehenden Link klickst, deine Stadt aus der Liste aller Campsites suchst, auf den Facebook Link klickst und der Facebook Gruppe beitrittst.",
|
||
"Finde deine Stadt auf dieser Liste und klick sie an. Du wirst auf die Facebook Gruppe des Campsites deiner Stadt geleitet. Klick den \"Gruppe beitreten\" Button um eine Beitrittsanfrage zu stellen. Jemand aus der Gruppe sollte dich in kürzester Zeit annehmen.",
|
||
"http://forum.freecodecamp.org/t/free-code-camp-city-based-local-groups/19574"
|
||
]
|
||
]
|
||
},
|
||
"it": {
|
||
"title": "Unisciti ad un gruppo Free Code Camp nella tua città",
|
||
"description": [
|
||
[
|
||
"https://i.imgur.com/XugIMb4.jpg",
|
||
"Una foto di alcuni dei nostri camper riuniti in un bar locale.",
|
||
"È possibile programmare insieme ad altri campers nella tua città aderendo ad un gruppo Free Code Camp vicino a te.",
|
||
""
|
||
],
|
||
[
|
||
"https://i.imgur.com/fTFMjwf.gif",
|
||
"Una gif che mostra come è possibile fare clic sul link qui sotto, e trovare la tua città nella lista dei gruppi locali.",
|
||
"Trova la tua città in questa lista e cliccala. Verrai indirizzato alla sua pagina Facebook. Fai clic sul pulsante \" Entra nel gruppo \". Qualcuno del gruppo dovrebbe approvare a breve la tua richiesta. Se la tua città non è in questo elenco, scorri alla parte superiore di questo articolo wiki per le istruzioni su come iniziare un gruppo nella tua città. ",
|
||
"http://forum.freecodecamp.org/t/free-code-camp-city-based-local-groups/19574"
|
||
]
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "58d9cc820ce2197370032a13",
|
||
"title": "Become a Supporter",
|
||
"description": [
|
||
[
|
||
"",
|
||
"",
|
||
"freeCodeCamp is a small nonprofit with a big mission: to help you improve your coding skills and expand your career. Help us pay for servers and other costs. Set up a monthly donation you can afford.",
|
||
"https://donate.freecodecamp.org"
|
||
]
|
||
],
|
||
"challengeSeed": [],
|
||
"tests": [],
|
||
"type": "Waypoint",
|
||
"challengeType": 7
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08817",
|
||
"title": "Make Dead Links Using the Hash Symbol",
|
||
"description": [
|
||
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
|
||
"This is also handy when you're changing the behavior of a link using <code>JavaScript</code>, which we'll learn about later.",
|
||
"<hr>",
|
||
"The current value of the <code>href</code> attribute is a link that points to \"http://freecatphotoapp.com\". Replace the <code>href</code> attribute value with a <code>#</code>, also known as a hash symbol, to create a dead link.",
|
||
"For example: <code>href=\"#\"</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"http://freecatphotoapp.com\" target=\"_blank\">cat photos</a>.</p>",
|
||
" ",
|
||
" <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
|
||
" ",
|
||
" <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"a\").attr(\"href\") === \"#\", 'message: Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erstelle tote Links mit dem Hash Symbol",
|
||
"description": [
|
||
"Manchmal wirst du <code>a</code> Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.",
|
||
"Das ist auch nützlich, wenn du die Funktion eines Links mit <code>jQuery</code> verändern willst. Das werden wir später noch behandeln.",
|
||
"<hr>",
|
||
"Ersetze den Inhalt des <code>href</code> Attributs deines <code>a</code> Elements mit einem <code>#</code>, 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 <code>a</code> a tu sitio web antes de saber qué enlazarán.",
|
||
"Esto también es útil cuando estás cambiando el comportamiento de un enlace usando <code>jQuery</code>, lo cual aprenderemos más adelante.",
|
||
"<hr>",
|
||
"Reemplaza el atributo <code>href</code> de tu elemento <code>a</code> con un <code>#</code>, también conocido como un símbolo de número o de <em>hash</em>, para convertirlo en un vínculo muerto."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie links mortos com hashtags",
|
||
"description": [
|
||
"Às vezes você vai querer adicionar elementos <code>a</code> ao seu site antes de saber para onde eles vão linkar.",
|
||
"Isso também é útil para quando você está mudando o comportamento de um link usando <code>jQuery</code>, que nós vamos aprender mais tarde.",
|
||
"<hr>",
|
||
"O valor atual do atributo <code>href</code> é \"http://freecatphotoapp.com\". Substitua esse valor por <code>#</code>, também conhecido como hashtag, para criar um link morto."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте мёртвые ссылки используя хэш-символ",
|
||
"description": [
|
||
"Иногда вам нужно добавить элементы <code>a</code> к вашему сайту до того, как вы знаете куда будут вести ссылки.",
|
||
"Также это может оказаться полезно, когда вы меняете поведение ссылки используя <code>jQuery</code>, что мы изучим позже.",
|
||
"<hr>",
|
||
"Замените значение атрибута <code>href</code> вашего элемента <code>a</code> на <code>#</code>, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08820",
|
||
"title": "Turn an Image into a Link",
|
||
"description": [
|
||
"You can make elements into links by nesting them within an <code>a</code> element.",
|
||
"Nest your image within an <code>a</code> element. Here's an example:",
|
||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"></a></code>",
|
||
"Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
|
||
"<hr>",
|
||
"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": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
|
||
" ",
|
||
" <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"a\").children(\"img\").length > 0, 'message: Nest the existing <code>img</code> element within an <code>a</code> element.');",
|
||
"assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');",
|
||
"assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Verlinke ein Bild",
|
||
"description": [
|
||
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
|
||
"<hr>",
|
||
"Umschließe dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel:",
|
||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a></code>",
|
||
"Vergewissere dich, dass du ein <code>#</code> innerhalb des <code>href</code> Attributs des <code>a</code> Elements nutzt, um daraus einen toten Link zu machen.",
|
||
"Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Convierte una imagen en un vínculo",
|
||
"description": [
|
||
"Puedes convertir elementos en enlaces al anidarlos dentro de un elemento <code>a</code>.",
|
||
"<hr>",
|
||
"Anida tu imagen dentro de un elemento <code>a</code>. He aquí un ejemplo: ",
|
||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a></code>",
|
||
"Recuerda usar <code>#</code> como atributo <code>href</code> de tu elemento <code>a</code> con el fin de convertirlo en un vínculo muerto.",
|
||
"Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Transforme uma imagem em um link",
|
||
"description": [
|
||
"Você pode transformar elementos em links aninhando-os a um elemento <code>a</code>.",
|
||
"Aninhe sua imagem a um elemento <code>a</code>. Aqui está um exemplo:",
|
||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Três gatinhos correndo em direção à câmera.\"></a></code>",
|
||
"Lembre-se de usar <code>#</code> no atributo <code>href</code> do seu elemento <code>a</code> para que o link esteja morto.",
|
||
"<hr>",
|
||
"Coloque a imagem existente dentro de um elemento âncora.",
|
||
"Depois de fazer isso, coloque o cursor do mouse sobre sua imagem. O seu cursor normal deve virar um cursor de clique. A foto agora é um link."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Превратите изображение в ссылку",
|
||
"description": [
|
||
"Вы можете превратить элементы в ссылки путём их вложения внутрь элементов <code>a</code>.",
|
||
"<hr>",
|
||
"Вложите ваше изображение в элемент <code>a</code>. Вот пример:",
|
||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a></code>",
|
||
"Не забывайте использовать <code>#</code> в качестве значения атрибута <code>href</code> вашего элемента <code>a</code> для превращения ссылки в мёртвую.",
|
||
"Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08827",
|
||
"title": "Create a Bulleted Unordered List",
|
||
"description": [
|
||
"HTML has a special element for creating <code>unordered lists</code>, or bullet point style lists.",
|
||
"Unordered lists start with an opening <code><ul></code> element, followed by any number of <code><li></code> elements. Finally, unordered lists close with a <code></ul></code>",
|
||
"For example: ",
|
||
"<blockquote><ul><br> <li>milk</li><br> <li>cheese</li><br></ul></blockquote>",
|
||
"would create a bullet point style list of \"milk\" and \"cheese\".",
|
||
"<hr>",
|
||
"Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"ul\").length > 0, 'message: Create a <code>ul</code> element.');",
|
||
"assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
|
||
"assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
|
||
"assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'message: Make sure your <code>li</code> elements have closing tags.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erstelle eine ungeordnete Liste",
|
||
"description": [
|
||
"HTML hat ein spezielles Element zum Erstellen von <code>unordered lists</code> (ungeordneten Listen).",
|
||
"Ungeordnete Listen starten mit einem <code><ul></code> Element. Dann beinhalten sie eine gewisse Anzahl an <code><li></code> Elementen.",
|
||
"Zum Beispiel:",
|
||
"<blockquote><ul><br> <li>Milch</li><br> <li>Käse</li><br></ul></blockquote>",
|
||
"würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.",
|
||
"<hr>",
|
||
"Entferne die letzten zwei <code>p</code> 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 <code>listas no ordenadas</code>, o listas con estilo viñeta.",
|
||
"Las listas no ordenadas comienzan con un elemento <code><ul></code>. A continuación contienen una cantidad de elementos <code><li>.</code>",
|
||
"Por ejemplo: ",
|
||
"<blockquote><ul><br> <li>leche</li><br> <li>queso</li><br></ul></blockquote>",
|
||
"creará una lista con viñetas y con elementos \"leche\" y \"queso\".",
|
||
"<hr>",
|
||
"Elimina los dos últimos elementos <code>p</code> y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie uma lista não ordenada com marcadores",
|
||
"description": [
|
||
"O HTML tem um elemento especial para criar <code>listas não ordenadas</code>, ou listas com marcadores.",
|
||
"Listas não ordenadas começam com um elemento <code>ul</code> e contêm diversos elementos <code>li</code> aninhados a ele.",
|
||
"Por exemplo: ",
|
||
"<blockquote><ul><br> <li>leite</li><br> <li>queijo</li><br></ul></blockquote>",
|
||
"criaria uma lista com marcadores contendo \"leite\" e \"queijo\".",
|
||
"<hr>",
|
||
"Remova os dois últimos elementos <code>p</code> e crie no final da página uma lista não ordenada de três coisas que gatos adoram."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте ненумерованный неупорядоченный список",
|
||
"description": [
|
||
"В HTML есть специальный элемент для создания <code>неупорядоченного списка</code>, или списка с точками в виде меток элементов.",
|
||
"Неупорядоченные списки начинаются с элемента <code><ul></code>. Затем они содержат некоторе количество элементов <code><li></code>.",
|
||
"Например: ",
|
||
"<blockquote><ul><br> <li>milk</li><br> <li>cheese</li><br></ul></blockquote>",
|
||
"создаст ненумерованный список из \"milk\" и \"cheese\".",
|
||
"<hr>",
|
||
"Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трёх вещей, которые любят кошки."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08828",
|
||
"title": "Create an Ordered List",
|
||
"description": [
|
||
"HTML has another special element for creating <code>ordered lists</code>, or numbered lists.",
|
||
"Ordered lists start with an opening <code><ol></code> element, followed by any number of <code><li></code> elements. Finally, ordered lists close with a <code></ol></code>",
|
||
"For example:",
|
||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>",
|
||
"would create a numbered list of \"Garfield\" and \"Sylvester\".",
|
||
"<hr>",
|
||
"Create an ordered list of the top 3 things cats hate the most."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" ",
|
||
"</main>"
|
||
],
|
||
"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\").length, 1, 'message: You should have only one <code>ul</code> element.');",
|
||
"assert.equal($(\"ol\").length, 1, 'message: You should have only one <code>ol</code> element.');",
|
||
"assert.equal($(\"ul li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
|
||
"assert.equal($(\"ol li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ol</code> element.');",
|
||
"assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
|
||
"assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'message: Make sure your <code>ol</code> element has a closing tag.');",
|
||
"assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'message: Make sure your <code>li</code> element has a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erstelle eine geordnete Liste",
|
||
"description": [
|
||
"HTML beinhaltet auch ein spezielles Element für <code>ordered lists</code> (geordnete/nummerierte Listen).",
|
||
"Geordnete Listen starten mit einem <code><ol></code> Element. Dann enthalten sie eine gewisse Anzahl an <code><li></code> Elementen.",
|
||
"Zum Beispiel:",
|
||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>",
|
||
"würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.",
|
||
"<hr>",
|
||
"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 <code>listas ordenadas</code>, o listas de estilo numerado.",
|
||
"Las listas ordenadas comienzan con un elemento <code><ol></code>. Luego contienen un número de elementos <code><li>.</code>",
|
||
"Por ejemplo:",
|
||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>",
|
||
"creará una lista numerada con \"Garfield\" y \"Sylvester\".",
|
||
"<hr>",
|
||
"Crea una lista ordenada de los 3 cosas que más odian los gatos."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie uma lista ordenada",
|
||
"description": [
|
||
"O HTML tem um elemento especial para criar <code>listas ordenadas</code>, ou listas numeradas.",
|
||
"Listas ordenadas começam com um elemento <code>ol</code> e contêm diversos elementos <code>li</code> aninhados a ele.",
|
||
"Por exemplo:",
|
||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Frajola</li><br></ol></blockquote>",
|
||
"criaria uma lista numerada contendo \"Garfield\" e \"Frajola\".",
|
||
"<hr>",
|
||
"Crie uma lista ordenada com as 3 coisas que os gatos mais odeiam."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте упорядоченный список",
|
||
"description": [
|
||
"В HTML есть специальный элемент для создания <code>упорядоченных списков</code>, или списков с номерами в качестве меток элементов.",
|
||
"Упорядоченные списки начинаются с элемента <code><ol></code>. Далее они содержат некоторое количество элементов <code><li></code>.",
|
||
"Например:",
|
||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>",
|
||
"создаст нумерованный список из \"Garfield\" и \"Sylvester\".",
|
||
"<hr>",
|
||
"Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08829",
|
||
"title": "Create a Text Field",
|
||
"description": [
|
||
"Now let's create a web form.",
|
||
"Input elements are a convenient way to get input from your user.",
|
||
"You can create a text input like this:",
|
||
"<code><input type=\"text\" /></code>",
|
||
"Note that <code>input</code> elements are self-closing.",
|
||
"<hr>",
|
||
"Create an <code>input</code> element of type <code>text</code> below your lists."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" ",
|
||
" ",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"input[type=text]\").length > 0, 'message: Your app should have an <code>input</code> element of type <code>text</code>.');"
|
||
],
|
||
"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:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Beachte, dass <code>input</code> Elemente selbstschließend sind.",
|
||
"<hr>",
|
||
"Erstelle ein <code>input</code> Element des Typ (\"type\") <code>text</code> 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:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Ten en cuenta que los elementos <code>input</code> son de cierre automático.",
|
||
"<hr>",
|
||
"Crea un elemento <code>input</code> de tipo <code>text</code> debajo de tus listas."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie um campo de texto",
|
||
"description": [
|
||
"Agora vamos criar um formulário web.",
|
||
"Campos de texto são uma forma conveniente de obter dados do seu usuário.",
|
||
"Você pode criar um assim:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Note que elementos <code>input</code> têm auto-fechamento.",
|
||
"<hr>",
|
||
"Crie um elemento <code>input</code> de tipo <code>text</code> abaixo das suas listas."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте текстовое поле",
|
||
"description": [
|
||
"Теперь давайте создадим web-форму.",
|
||
"Поля текстового ввода - удобный способ получения данных от пользователя.",
|
||
"Вы можете создать текстовое поле следующим образом:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Обратите внимание, что элементы <code>input</code> самозакрывающиеся.",
|
||
"<hr>",
|
||
"Создайте элемент <code>input</code> типа <code>text</code> под вашими списками."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08830",
|
||
"title": "Add Placeholder Text to a Text Field",
|
||
"description": [
|
||
"Placeholder text is what is displayed in your <code>input</code> element before your user has inputted anything.",
|
||
"You can create placeholder text like so:",
|
||
"<code><input type=\"text\" placeholder=\"this is placeholder text\"></code>",
|
||
"<hr>",
|
||
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" <input type=\"text\">",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.');",
|
||
"assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');",
|
||
"assert($(\"input[type=text]\").length > 0 && code.match(/<input((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[\\^'\">\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'message: The finished <code>input</code> element should have valid syntax.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Füge Platzhalter zu einem Textfeld hinzu",
|
||
"description": [
|
||
"Platzhaltertexte erscheinen in deinen <code>input</code> Feldern, bevor der Nutzer etwas eingibt.",
|
||
"Du kannst Platzhalter auf folgende Weise erstellen:",
|
||
"<code><input type=\"text\" placeholder=\"Das ist ein Platzhalter.\"></code>",
|
||
"<hr>",
|
||
"Setze bei deinem <code>input</code> Element den Wert für <code>placeholder</code> 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:",
|
||
"<code><input type=\"text\" placeholder=\"este es un texto de relleno\"></code>",
|
||
"<hr>",
|
||
"Establece el valor del <code>texto de relleno</code> de tu campo de texto como \"cat photo URL\"."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Adicione um placeholder a um campo de texto",
|
||
"description": [
|
||
"O placeholder é o texto que aparece no seu <code>input</code> quando ele está vazio.",
|
||
"Você pode adicionar um placeholder ao seu campo de texto assim:",
|
||
"<code><input type=\"text\" placeholder=\"esse é o placeholder\"></code>",
|
||
"<hr>",
|
||
"Coloque o placeholder \"cat photo URL\" no seu <code>input</code> de texto."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Добавьте замещающий текст к текстовому полю",
|
||
"description": [
|
||
"Ваш замещающий текст - это то, что отображается в виде текста внутри <code>input</code> пока пользователь не ввёл туда что-либо.",
|
||
"Вы можете создать замещающий текст следующим образом:",
|
||
"<code><input type=\"text\" placeholder=\"это замещающий текст\"></code>",
|
||
"<hr>",
|
||
"Установите значение атрибута <code>placeholder</code> вашего текстового поля <code>input</code> равными \"cat photo URL\"."
|
||
]
|
||
}
|
||
},
|
||
"guideUrl":
|
||
"https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field"
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08830",
|
||
"title": "Create a Form Element",
|
||
"description": [
|
||
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
|
||
"For example:",
|
||
"<code><form action=\"/url-where-you-want-to-submit-form-data\"></form></code>",
|
||
"<hr>",
|
||
"Nest your text field inside a <code>form</code> element, and add the <code>action=\"/submit-cat-photo\"</code> attribute to the form element."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\">",
|
||
"<main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a <code>form</code> element.');",
|
||
"assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');",
|
||
"assert(code.match(/<\\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\\/form>/g).length === code.match(/<form [^<]*>/g).length, 'message: Make sure your <code>form</code> element has well-formed open and close tags.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erstelle ein Formular",
|
||
"description": [
|
||
"Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein <code>form</code> Element bestimmst.",
|
||
"Zum Beispiel:",
|
||
"<code><form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form></code>",
|
||
"<hr>",
|
||
"Umschließe dein Textfeld mit einem <code>form</code> Element. Füge anschließend das Attribut <code>action=\"/submit-cat-photo\"</code> hinzu."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Crea un elemento de formulario",
|
||
"description": [
|
||
"Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento <code>form</code>.",
|
||
"Por ejemplo:",
|
||
"<code><form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"></form></code>",
|
||
"<hr>",
|
||
"Anida tu campo de texto en un elemento <code>form</code>. Agrega el atributo <code>action=\"/submit-cat-photo\"</code> a este elemento de formulario."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie um elemento de formulário",
|
||
"description": [
|
||
"Você pode construir formulários web que realmente enviam dados para um servidor usando nada mais que HTML puro. Para isso, você precisa especificar uma URL no atributo <code>action</code> do seu elemento <code>form</code>.",
|
||
"Por exemplo:",
|
||
"<code><form action=\"/url-para-onde-voce-quer-enviar-os-dados\"></form></code>",
|
||
"<hr>",
|
||
"Aninhe o seu campo de texto a um elemento <code>form</code>. Adicione o atributo <code>action=\"/submit-cat-photo\"</code> a esse <code>form</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте элемент типа форма",
|
||
"description": [
|
||
"Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента <code>form</code>.",
|
||
"Например:",
|
||
"<code><form action=\"/url-куда-вы-хотите-отправить-данные-формы\"></form></code>",
|
||
"<hr>",
|
||
"Вложите ваше текстовое поле в элемент <code>form</code>. Добавьте атрибут <code>action=\"/submit-cat-photo\"</code> к этому элементу формы."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedd08830",
|
||
"title": "Add a Submit Button to a Form",
|
||
"description": [
|
||
"Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
|
||
"Here's an example submit button:",
|
||
"<code><button type=\"submit\">this button submits the form</button></code>",
|
||
"<hr>",
|
||
"Add a button as the last element of your <code>form</code> element with a type of <code>submit</code>, and \"Submit\" as its text."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\">",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');",
|
||
"assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');",
|
||
"assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');",
|
||
"assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure your <code>button</code> element has a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Füge einen Button zum Senden hinzu",
|
||
"description": [
|
||
"Lass uns nun einen <code>submit</code> Button hinzufügen. Durch einen Klick auf diesen Button werden die Daten des Formulars an die URL gesendet, welche du in dem <code>action</code> Attribut deines Formulars angegeben hast.",
|
||
"Hier ist ein Beispiel für einen solchen Button:",
|
||
"<code><button type=\"submit\">Dieser Button überträgt die Daten des Formulars.</button></code>",
|
||
"<hr>",
|
||
"Füge einen Button zum Senden mit dem Typ <code>submit</code> und \"Submit\" als Text zu deinem <code>form</code> Element hinzu."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Agrega un botón Enviar a un formulario",
|
||
"description": [
|
||
"Añadamos un elemento <code>submit</code> a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo <code>action</code> de tu formulario. ",
|
||
"He aquí un ejemplo de un botón de envío:",
|
||
"<code><button type=\" submit\">este botón envía el formulario</botón></code>",
|
||
"<hr>",
|
||
"Agrega un botón de enviar a tu elemento <code>form</code> con el tipo <code>submit</code> y con el texto \"Submit\"."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Adicione um botão de enviar a um formulário",
|
||
"description": [
|
||
"Vamos adicionar um botão de enviar (<code>submit</code>) ao seu formulário. Quando seu usuário clicar nesse botão, os dados do formulário serão enviados para a URL que você especificou no atributo <code>action</code> do seu formulário.",
|
||
"Aqui está um botão de exemplo:",
|
||
"<code><button type=\"submit\">esse botão envia o formulário</button></code>",
|
||
"<hr>",
|
||
"Adicione um botão de enviar ao seu elemento <code>form</code> com tipo <code>submit</code> e com texto \"Submit\"."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Добавьте кнопку отправки к форме",
|
||
"description": [
|
||
"Давайте добавим кнопку отправки <code>submit</code> к вашей форме. Нажатие на эту кнопку отправит данные из вашей формы по адресу, указанному в атрибуте <code>action</code> вашей формы.",
|
||
"Вот пример кнопки отправки:",
|
||
"<code><button type=\"submit\">эта кнопка отправляет данные формы</button></code>",
|
||
"<hr>",
|
||
"Добавьте кнопку отправки к вашему элементу <code>form</code> с указанием типа <code>submit</code> и \"Submit\" в качестве отображаемого текста."
|
||
]
|
||
}
|
||
},
|
||
"guideUrl":
|
||
"https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form"
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedc08830",
|
||
"title": "Use HTML5 to Require a Field",
|
||
"description": [
|
||
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
|
||
"For example, if you wanted to make a text input field required, you can just add the attribute <code>required</code> within your <code>input</code> element, like this: <code><input type=\"text\" required></code>",
|
||
"<hr>",
|
||
"Make your text <code>input</code> a <code>required</code> field, so that your user can't submit the form without completing this field.",
|
||
"Then try to submit the form without inputting any text. See how your HTML5 form notifies you that the field is required?"
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\">",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Nutze HTML5 um ein Pflichtfeld zu erstellen",
|
||
"description": [
|
||
"Du kannst bestimmte Felder eines Formulars zu Pflichtfeldern erklären. Damit ist es deinen Usern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.",
|
||
"Um zum Beispiel ein Textfeld zum Pflichtfeld zu erklären, kannst du einfach ein <code>required</code> innerhalb deines <code>input</code> Elements hinzufügen: <code><input type=\"text\" required></code>",
|
||
"<hr>",
|
||
"Mache aus deinem <code>input</code> Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.",
|
||
"Probier dann dein Formular ohne einen Text abzuschicken. Siehst du wie dein HTML5 Formular dich darauf hinweißt dass das Feld verpflichtend ist?",
|
||
"Beachte: dieses Feld funktioniert nicht in Safari."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Utiliza HTML5 para especificar campos obligatorios",
|
||
"description": [
|
||
"Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que lo haya llenado.",
|
||
"Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra <code>required</code> dentro de tu elemento <code>input</code>, usarías: <code><input type=\"text\" required></code> ",
|
||
"<hr>",
|
||
"Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.",
|
||
"Luego, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?",
|
||
"Nota: Este campo no funciona en Safari."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Use HTML5 para tornar campos obrigatórios",
|
||
"description": [
|
||
"Você pode tornar obrigatórios campos específicos do seu formulário, assim seu usuário não conseguirá enviar os dados sem preencher esses campos.",
|
||
"Por exemplo, se você quiser que um campo de texto seja obrigatório, basta adicionar a palavra <code>required</code> ao seu elemento <code>input</code>, assim: <code><input type=\"text\" required></code>",
|
||
"<hr>",
|
||
"Torne seu campo de texto obrigatório, de forma que seu usuário não consiga enviar o formulário sem preencher esse campo.",
|
||
"Então, tente enviar o formulário sem preencher esse campo. Viu como o formulário HTML5 avisa que o campo é obrigatório?",
|
||
"<strong>Nota</strong><br>Esse campo não funciona no Safari."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title":
|
||
"Используйте HTML5, чтобы сделать заполнение поля обязательным",
|
||
"description": [
|
||
"Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
|
||
"Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code><input type=\"text\" required></code>",
|
||
"<hr>",
|
||
"Сделайте ваше текстовое поле <code>input</code> обязательным <code>required</code> для заполнения, чтобы пользователь не мог отправить данные формы без заполнения этого поля.",
|
||
"Далее попробуйте отправить данные формы без ввода какого-либо текста. Видите как ваша HTML5-форма уведомляет вас о том, что поле обязательное для заполнения?",
|
||
"Внимание: это поле не работает в Safari."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08834",
|
||
"title": "Create a Set of Radio Buttons",
|
||
"description": [
|
||
"You can use <code>radio buttons</code> for questions where you want the user to only give you one answer out of multiple options.",
|
||
"Radio buttons are a type of <code>input</code>.",
|
||
"Each of your radio buttons should be nested within its own <code>label</code> element. Wrapping an <code>input</code> element inside of a <code>label</code> element makes the label text clickable.",
|
||
"All related radio buttons should have the same <code>name</code> attribute.",
|
||
"Here's an example of a radio button:",
|
||
"<blockquote><label> <br> <input type=\"radio\" name=\"indoor-outdoor\">Indoor <br></label></blockquote>",
|
||
"It is considered best practice to set a <code>for</code> attribute on the <code>label</code> element, with a value that matches the value of the <code>id</code> attribute of the <code>input</code> element. This allows assistive technologies to create a linked relationship between the label and the child <code>input</code> element. For example:",
|
||
"<blockquote><label for=\"indoor\"> <br> <input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\">Indoor <br></label></blockquote>",
|
||
"<hr>",
|
||
"Add a pair of radio buttons to your form. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($('input[type=\"radio\"]').length > 1, 'message: Your page should have two radio button elements.');",
|
||
"assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'message: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');",
|
||
"assert($('label > input[type=\"radio\"]:only-child').length > 1, 'message: Each of your two radio button elements should be nested in its own <code>label</code> element.');",
|
||
"assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
|
||
"assert($(\"label\").text().match(/indoor/gi), 'message: One of your radio buttons should have the label <code>indoor</code>.');",
|
||
"assert($(\"label\").text().match(/outdoor/gi), 'message: One of your radio buttons should have the label <code>outdoor</code>.');",
|
||
"assert($(\"label\").parent().get(0).tagName.match('FORM'), 'message: Each of your radio button elements should be added within the <code>form</code> tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erstelle ein Set von Radiobuttons",
|
||
"description": [
|
||
"Du kannst Optionsfelder, <code>radio buttons</code>, für Fragen verwenden, auf die der Nutzer nur eine Antwort geben soll.",
|
||
"Radiobuttons sind lediglich ein weiterer Typ von <code>input</code> Elementen.",
|
||
"Jeder deiner Radiobuttons sollte innerhalb eines eigenen <code>label</code> Elements liegen.",
|
||
"Alle Radiobuttons die in einem Bezug zueinander stehen sollten das gleiche <code>name</code> Attribut teilen.",
|
||
"Ein Beispiel eines Radiobuttons:",
|
||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||
"<hr>",
|
||
"Füge ein Paar Radiobuttons zu deinem Formular hinzu. Einer sollte die Option <code>indoor</code> und der andere die Option <code>outdoor</code> haben."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Crea un Conjunto de botones de radio",
|
||
"description": [
|
||
"Puedes usar <code>botones de radio</code> para las preguntas en las que deseas que el usuario sólo pueda dar una respuesta.",
|
||
"Los botones de radio son un tipo del elemento <code>input</code>",
|
||
"Cada uno de los botones de radio debe estar anidado dentro de su propio elemento <code>label</code>.",
|
||
"Todos los botones de radio relacionados deben tener el mismo atributo <code>name</code>.",
|
||
"He aquí un ejemplo de un botón de radio:",
|
||
"<code><label><input type=\"radio\" name=\"dentro-fuera\"> Dentro</label></code>",
|
||
"<hr>",
|
||
"Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de <code>indoor</code> y el otro debe tener la opción <code>outdoor</code>. "
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie um conjunto de botões de opção",
|
||
"description": [
|
||
"Você pode usar <code>botões de opção</code> (botões de rádio) para perguntas em que você quer dar opções ao usuário, mas quer que ele escolha apenas uma.",
|
||
"Botões de opção são um tipo de <code>input</code>.",
|
||
"Cada um dos botões de opção deve ser aninhado ao seu elemento <code>label</code>.",
|
||
"Todos os botões de opção relacionados devem ter o mesmo atributo <code>name</code>.",
|
||
"Aqui está um exemplo de um botão de opção:",
|
||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||
"<hr>",
|
||
"Adicione um par de botões de opção ao seu formulário. Um deles deve ser a opção <code>indoor</code> e o outro deve ser a opção <code>outdoor</code>. Ambos devem ter o atributo <code>name</code> de <code>indoor-outdoor</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте набор радио-кнопок",
|
||
"description": [
|
||
"Вы можете использовать <code>радио кнопки</code> для вопросов, которые требуют выбора одного варианта ответа из множества.",
|
||
"Радио-кнопки относятся к типу <code>input</code>",
|
||
"Каждая из ваших радио-кнопок должна быть вложена внутрь своего собственного элемента <code>label</code>.",
|
||
"Все относящиеся друг к другу, формирующие группу, радио-кнопки должны иметь один и тот же атрибут <code>name</code>.",
|
||
"Вот пример радио-кнопки:",
|
||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||
"<hr>",
|
||
"Добавьте пару радио-кнопок к вашей форме. Одна должна соответствовать варианту <code>indoor</code>, а другая - <code>outdoor</code>."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08835",
|
||
"title": "Create a Set of Checkboxes",
|
||
"description": [
|
||
"Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.",
|
||
"Checkboxes are a type of <code>input</code>",
|
||
"Each of your checkboxes should be nested within its own <code>label</code> element.",
|
||
"All related checkbox inputs should have the same <code>name</code> attribute.",
|
||
"Here's an example of a checkbox:",
|
||
"<code><label for=\"loving\"><input id=\"loving\" type=\"checkbox\" name=\"personality\"> Loving</label></code>",
|
||
"<hr>",
|
||
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label for=\"indoor\"><input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
||
" <label for=\"outdoor\"><input id=\"outdoor\" type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($('input[type=\"checkbox\"]').length > 2, 'message: Your page should have three checkbox elements.');",
|
||
"assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'message: Each of your three checkbox elements should be nested in its own <code>label</code> element.');",
|
||
"assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
|
||
"assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'message: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Erstelle ein paar Checkboxen",
|
||
"description": [
|
||
"Formulare nutzen Kontrollkästchen, <code>checkboxes</code> meistens für Fragen, die mehrerer Antworten bedürfen.",
|
||
"Checkboxen sind eine Art von <code>input</code> Elementen",
|
||
"Jedes deiner Checkboxen sollte innerhalb eines eigenen <code>label</code> Elements liegen.",
|
||
"Alle zusammengehörende Checkboxes sollten das gleiche <code>name</code> Attribut haben.",
|
||
"Hier ist ein Beispiel für eine Checkbox:",
|
||
"<code><label><input type=\"checkbox\" name=\"personality\"> Loving</label></code>",
|
||
"<hr>",
|
||
"Füge deinem Formular drei Checkboxen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen <code>label</code> Elements liegen. Alle sollten das gleiche <code>name</code> Attribut <code>personality</code> teilen."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Crea un conjunto de casillas de verificación",
|
||
"description": [
|
||
"Los formularios suelen usar <code>casillas de verificación</code> para preguntas que pueden tener más de una respuesta.",
|
||
"Las casillas de verificación son un tipo del elemento <code>input</code>",
|
||
"Cada una de tus casillas de verificación debe ser anidada dentro de su propio elemento <code>label</code>.",
|
||
"Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo <code>name</code>.",
|
||
"He aquí un ejemplo de una casilla de verificación:",
|
||
"<code><label><input type=\"checkbox\" name=\"personalidad\"> Cariñoso</label></code>",
|
||
"<hr>",
|
||
"Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben tener <code>personality</code> como su atributo <code>name</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Crie um conjunto de caixas de seleção",
|
||
"description": [
|
||
"Formulários geralmente usam <code>caixas de seleção</code> (checkboxes) para perguntas que podem ter mais de uma resposta.",
|
||
"Caixas de seleção são um tipo de <code>input</code>.",
|
||
"Cada uma das suas caixas de seleção deve estar aninhada a seu próprio elemento <code>label</code>.",
|
||
"Todas as caixas de seleção relacionadas devem ter o mesmo atributo <code>name</code>.",
|
||
"Aqui está um exemplo de uma caixa de seleção: ",
|
||
"<code><label><input type=\"checkbox\" name=\"personality\"> Amável</label></code>",
|
||
"<hr>",
|
||
"Adicione ao seu formulário um conjunto de três caixas de seleção. Cada caixa deve estar aninhada a seu próprio elemento <code>label</code>. Todas elas devem ter o mesmo atributo <code>name</code> de <code>personality</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Создайте набор флаговых кнопок",
|
||
"description": [
|
||
"Обычно формы используют <code>флаги (флаговые кнопки)</code> для вопросов, к которым может относиться несколько вариантов ответов.",
|
||
"Флаги относятся к типу <code>input</code>",
|
||
"Каждый из ваших флагов должен быть вложен в собственный элемент <code>label</code>.",
|
||
"Все относящиеся друг к другу флаги должны иметь одинаковый атрибут <code>name</code>.",
|
||
"Вот пример флаговой кнопки:",
|
||
"<code><label><input type=\"checkbox\" name=\"personality\"> Loving</label></code>",
|
||
"<hr>",
|
||
"Добавьте набор из трёх флаговых кнопок к вашей форме. Каждый флаг должен быть вложен внутрь собственного элемента <code>label</code>. Все три флага должны иметь одинаковый атрибут <code>name</code>, значение которго равно <code>personality</code>."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedd08835",
|
||
"title": "Check Radio Buttons and Checkboxes by Default",
|
||
"description": [
|
||
"You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
|
||
"To do this, just add the word \"checked\" to the inside of an input element. For example:",
|
||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||
"<hr>",
|
||
"Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($('input[type=\"radio\"]').prop(\"checked\"), 'message: Your first radio button on your form should be checked by default.');",
|
||
"assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'message: Your first checkbox on your form should be checked by default.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Standardmäßig ausgewählte Radiobuttons und Checkboxen",
|
||
"description": [
|
||
"Du kannst Checkboxen und Radiobuttons standardmäßig markieren, indem du das <code>checked</code> Attribut verwendest.",
|
||
"Das kannst du erreichen, indem du das Word \"checked\" innerhalb des Inputelements einfügst. Zum Beispiel so:",
|
||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||
"<hr>",
|
||
"Stelle sicher, dass jeweils dein erster Radiobutton und deine erste Checkbox standardmäßig markiert sind."
|
||
]
|
||
},
|
||
"es": {
|
||
"title":
|
||
"Marca botones de radio y casillas de verificación por omisión",
|
||
"description": [
|
||
"Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
|
||
"Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento <code>input</code>. Por ejemplo:",
|
||
"<code><input type=\"radio\" name=\"nombre-de-prueba\" checked></code>",
|
||
"<hr>",
|
||
"Establece como marcados por omisión el primero de tus <code>botones de radio</code> y la primera <code>casilla de verificación</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title":
|
||
"Faça botões de opção e caixas de seleção estarem marcados por padrão",
|
||
"description": [
|
||
"Você pode fazer uma caixa de seleção ou botão de opção estar marcado por padrão usando o atributo <code>checked</code>.",
|
||
"Para fazer isso, apenas insira a palavra \"checked\" em um elemento <code>input</code>. Por exemplo:",
|
||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||
"<hr>",
|
||
"Faça o primeiro dos seus <code>botões de opção</code> e a primeira das suas <code>caixas de seleção</code> estarem ambos marcados por padrão."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Отметьте радио-кнопки и флаговые кнопки по-умолчанию",
|
||
"description": [
|
||
"Вы можете установить флаг или радио-кнопку отмеченной по-умолчанию с помощью атрибута <code>checked</code>.",
|
||
"Для этого добавьте слово \"checked\" в качестве атрибута элемента input. Например:",
|
||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||
"<hr>",
|
||
"Установите первую <code>радио-кнопку</code> и первый <code>флаг</code> из наборов отмеченными по-умолчанию."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08835",
|
||
"title": "Nest Many Elements within a Single div Element",
|
||
"description": [
|
||
"The <code>div</code> element, also known as a division element, is a general purpose container for other elements.",
|
||
"The <code>div</code> element is probably the most commonly used HTML element of all.",
|
||
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>.",
|
||
"<hr>",
|
||
"Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
|
||
"Hint: Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<main>",
|
||
" <p>Click here to view more <a href=\"#\">cat photos</a>.</p>",
|
||
" ",
|
||
" <a href=\"#\"><img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
|
||
" ",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
" ",
|
||
" <form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label><br>",
|
||
" <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label><br>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
" </form>",
|
||
"</main>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"div\").children(\"p\").length > 1, 'message: Nest your <code>p</code> elements inside your <code>div</code> element.');",
|
||
"assert($(\"div\").children(\"ul\").length > 0, 'message: Nest your <code>ul</code> element inside your <code>div</code> element.');",
|
||
"assert($(\"div\").children(\"ol\").length > 0, 'message: Nest your <code>ol</code> element inside your <code>div</code> element.');",
|
||
"assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'message: Make sure your <code>div</code> element has a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"de": {
|
||
"title": "Umschließe viele Elemente mit einem einzigen div Element",
|
||
"description": [
|
||
"Das <code>div</code> Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.",
|
||
"Das <code>div</code> Element ist wahrscheinlich das am häufigsten verwendete HTML Element.",
|
||
"Wie jedes andere Element – das sich nicht selbst schließt – kannst du ein <code>div</code> Element mit <code><div></code> öffnen und mit <code></div></code> wieder schließen.",
|
||
"<hr>",
|
||
"Versuche dein öffnendes <code>div</code> Element überhalb des <code>p</code> Elements von \"Things cats love\" und das schließende <code>div</code> unterhalb des schließenden <code>ol</code> Elements zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>",
|
||
"Umschließe deine \"Things cats love\" und \"Things cats hate\" Listen mit einem einzelnen <code>div</code> Element."
|
||
]
|
||
},
|
||
"es": {
|
||
"title": "Anida muchos elementos dentro de una sólo elemento div",
|
||
"description": [
|
||
"El elemento <code>div</code>, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.",
|
||
"El elemento <code>div</code> es probablemente el elemento HTML más utilizado.",
|
||
"Al igual que cualquier otro elemento sin cierre automático, puedes abrir una etiqueta <code>div</code> con <code><div></code> y cerrarla en otra línea con <code></div></code> .",
|
||
"<hr>",
|
||
"Trata de poner tu etiqueta de apertura <code>div</code> por encima de elemento <code>p</code> \"Things cat love\", y tu etiqueta de cierre de <code>div</code> después de tu etiqueta de cierre de <code>ol</code>, para que cada una de tus listas estén dentro de un <code>div</code>. ",
|
||
"Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento <code>div</code>."
|
||
]
|
||
},
|
||
"pt-br": {
|
||
"title": "Aninhe diversos elementos a um único elemento div",
|
||
"description": [
|
||
"O elemento <code>div</code>, também conhecido como elemento de divisão, é um contâiner de propósito geral para outros elementos.",
|
||
"O elemento <code>div</code> provavelmente é o elemento HTML mais usado de todos.",
|
||
"Da mesma forma que qualquer outro elemento que não tem auto-fechamento, você pode abrir um elemento <code>div</code> com <code><div></code> e fechá-lo em outra linha com <code></div></code>.",
|
||
"<hr>",
|
||
"Tente colocar sua tag <code>div</code> de abertura acima do seu elemento <code>p</code> \"Things cats love\" e sua tag <code>div</code> de fechamento depois da sua tag <code>ol</code> de fechamento, de forma que ambas as suas listas estejam dentro da mesma <code>div</code>.",
|
||
"Aninhe as listas \"Things cats love\" e \"Things cats hate\" dentro do mesmo elemento <code>div</code>."
|
||
]
|
||
},
|
||
"ru": {
|
||
"title": "Вложите множество элементов внутрь одного элемента div",
|
||
"description": [
|
||
"Элемент <code>div</code>, известный как элемент раздела, является контейнером общего назначения для других элементов.",
|
||
"Элемент <code>div</code> возможно наиболее широко используемый HTML элемент из всех возможных.",
|
||
"Как и с любым другим несамозакрывающимся элементом, вы можете открыть элемент <code>div</code> меткой <code><div></code> и закрыть на следующей строке меткой <code></div></code>.",
|
||
"<hr>",
|
||
"Попробуйте разместить открывающую метку <code>div</code> над вашим элементом <code>p</code> с текстом \"Things cats love\", а закрывающую метку <code>div</code> после закрытия элемента <code>ol</code>, таким образом оба ваших списка оказываются внутри одного элемента <code>div</code>.",
|
||
"Вложите ваши списки \"Things cats love\" и \"Things cats hate\" внутрь одного элемента <code>div</code>."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "587d78aa367417b2b2512aed",
|
||
"title": "Declare the Doctype of an HTML Document",
|
||
"description": [
|
||
"The challenges so far have covered specific HTML tags and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.",
|
||
"At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.",
|
||
"You tell the browser this information by adding the <code><!DOCTYPE ...></code> tag on the first line, where the \"<code>...</code>\" part is the version of HTML. For HTML5, you use <code><!DOCTYPE html></code>.",
|
||
"The <code>!</code> and uppercase <code>DOCTYPE</code> is important, especially for older browsers. The <code>html</code> is not case sensitive.",
|
||
"Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code><html></code> goes directly below the <code><!DOCTYPE html></code> line, and the closing <code></html></code> goes at the end of the page.",
|
||
"Here's an example of the page structure:",
|
||
"<blockquote><!DOCTYPE html><br><html><br> <!-- Your HTML code goes here --><br></html></blockquote>",
|
||
"<hr>",
|
||
"Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text."
|
||
],
|
||
"challengeSeed": ["", "", ""],
|
||
"tests": [
|
||
"assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'message: Your code should include a <code><!DOCTYPE html></code> tag.');",
|
||
"assert($('html').length == 1, 'message: There should be one <code>html</code> element.');",
|
||
"assert(code.match(/<html>\\s*?<h1>\\s*?.*?\\s*?<\\/h1>\\s*?<\\/html>/gi), 'message: The <code>html</code> tags should wrap around one <code>h1</code> element.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"pt-br": {
|
||
"title": "Declare o DOCTYPE de um documento HTML",
|
||
"description": [
|
||
"Os desafios até agora trataram de tags HTML específicas e seus usos. No entanto, há alguns elementos que determinam a estrutura geral da sua página e devem ser incluídos em todos os documentos HTML.",
|
||
"No começo do seu documento, você precisa dizer ao navegador qual versão do HTML sua página está usando. O HTML é uma linguagem em evolução e é atualizado regularmente. A maioria dos navegadores mais populares suporta a última especificação, que é o HTML5. No entanto, páginas mais antigas podem estar usando versões anteriores da linguagem.",
|
||
"Você pode dar ao navegador essa informação adicionando a tag <code><!DOCTYPE ...></code> na primeira linha, onde a parte \"<code>...</code>\" é a versão do HTML. Para o HTML5, o código é <code><!DOCTYPE html></code>.",
|
||
"O <code>!</code> e o <code>DOCTYPE</code> todo em maiúsculas são importantes, especialmente para navegadores mais velhos. O <code>html</code> não é sensível a maiúsculas e minúsculas.",
|
||
"Em seguida, o resto do seu código HTML deve estar delimitado por tags <code>html</code>. A tag <code><html></code> vai diretamente abaixo da linha <code><!DOCTYPE html></code>, e a tag <code></html></code> vai no final da página.",
|
||
"Aqui está um exemplo da estrutura de uma página:",
|
||
"<blockquote><!DOCTYPE html><br><html><br> <!-- Seu código HTML vai aqui --><br></html></blockquote>",
|
||
"<hr>",
|
||
"Adicione uma tag <code>DOCTYPE</code> para HTML5 no topo do documento HTML em branco no editor de texto. Abaixo dela, adicione tags <code>html</code> de abertura e fechamento, ao redor de um elemento <code>h1</code>. O texto do <code>h1</code> pode ser qualquer um."
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
"id": "587d78aa367417b2b2512aec",
|
||
"title": "Define the Head and Body of an HTML Document",
|
||
"description": [
|
||
"You can add another level of organization in your HTML document within the <code>html</code> tags with the <code>head</code> and <code>body</code> elements. Any markup with information about your page would go into the <code>head</code> tag. Then any markup with the content of the page (what displays for a user) would go into the <code>body</code> tag.",
|
||
"Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.",
|
||
"Here's an example of a page's layout:",
|
||
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- metadata elements --><br> </head><br> <body><br> <!-- page contents --><br> </body><br></html></blockquote>",
|
||
"<hr>",
|
||
"Edit the markup so there's a <code>head</code> and a <code>body</code>. The <code>head</code> element should only include the <code>title</code>, and the <code>body</code> element should only include the <code>h1</code> and <code>p</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<!DOCTYPE html>",
|
||
"<html>",
|
||
" <title>The best page ever</title>",
|
||
" ",
|
||
" <h1>The best page ever</h1>",
|
||
" <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
" ",
|
||
"</html> "
|
||
],
|
||
"tests": [
|
||
"assert($('head').length == 1, 'message: There should be only one <code>head</code> element on the page.');",
|
||
"assert($('body').length == 1, 'message: There should be only one <code>body</code> element on the page.');",
|
||
"assert($('html').children('head').length == 1, 'message: The <code>head</code> element should be a child of the <code>html</code> element.');",
|
||
"assert($('html').children('body').length == 1, 'message: The <code>body</code> element should be a child of the <code>html</code> element.');",
|
||
"assert(code.match(/<head>\\s*?<title>\\s*?.*?\\s*?<\\/title>\\s*?<\\/head>/gi), 'message: The <code>head</code> element should wrap around the <code>title</code> element.');",
|
||
"assert($('body').children('h1').length == 1 && $('body').children('p').length == 1, 'message: The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.');"
|
||
],
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"translations": {
|
||
"pt-br": {
|
||
"title": "Defina cabeça e corpo de um documento HTML",
|
||
"description": [
|
||
"Você pode adicionar mais um nível de organização ao seu documento HTML dentro da tag <code>html</code> com os elementos <code>head</code> (cabeça) e <code>body</code> (corpo). Qualquer código com informações sobre a sua página deve estar dentro da tag <code>head</code>. Assim, qualquer código com o conteúdo da sua página (o que aparece para o usuário) deve estar dentro da tag <code>body</code>.",
|
||
"Elementos de metadados, como <code>link</code>, <code>meta</code>, <code>title</code> e <code>style</code>, tipicamente aparecem dentro do elemento <code>head</code>.",
|
||
"Aqui está um exemplo da estrutura de uma página:",
|
||
"<blockquote><!DOCTYPE html><br><html><br> <head><br> <!-- elementos de metadados --><br> </head><br> <body><br> <!-- conteúdo da página --><br> </body><br></html></blockquote>",
|
||
"<hr>",
|
||
"Edite o código para que tenha uma <code>head</code> e um <code>body</code>. O elemento <code>head</code> deve incluir apenas o <code>title</code>, e o elemento <code>body</code> deve conter apenas o <code>h1</code> e o <code>p</code>."
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|