![\"Ein](\"https://i.imgur.com/jOc1JF1.png\" "\\"Klicke")
/g), 'message: The opening main tag should come before the first paragraph tag.');",
"assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'message: The closing main 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 header (cabeçalho), footer (rodapé), nav (navegação), video (vídeo), article (artigo), section (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 main (principal) ajuda mecanismos de busca e outros desenvolvedores a encontrar o conteúdo principal da sua página.",
"Nota
Várias das novas tags HTML5 e seus benefícios são discutidos na seção de Acessibilidade aplicada.",
"
", "Crie um segundo elemento
p depois dos elementos p existentes com o seguinte texto gatinho ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.",
"Coloque tags main 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 img element, and point to a specific image's URL using the src attribute.",
"An example of this would be:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\" />",
"Note that in most cases, img elements are self-closing.",
"All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
"Note: If the image is purely decorative, using an empty alt attribute is a best practice.",
"Ideally the alt attribute should not contain special characters unless needed.",
"Let's add an alt attribute to our img example above:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\" />",
"", "Let's try to add an image to our website:", "Insert an
img tag, before the h2 element.",
"Now set the src attribute so that it points to this url:",
"https://bit.ly/fcc-relaxing-cat",
"Finally don't forget to give your image an alt text."
],
"challengeSeed": [
"CatPhotoApp
", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
", "src attribute that points to the kitten image.');",
"assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element must have an alt attribute.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"description": [
"Du kannst img Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das src Attribut.",
"Ein Beispiel dafür wäre:",
"<img src=\"https://www.deine-bild-quelle.com/dein-bild.jpg\">",
"Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.",
"
",
"Versuche es mit diesem Bild:",
"https://bit.ly/fcc-relaxing-cat"
]
},
"fr": {
"title": "Ajouter des images à votre site Web",
"description": [
"Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.",
"Un exemple de cette procédure serait :",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">",
"Note that in most cases, img elements are self-closing.",
"Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.",
"
",
"Essayez avec cette image :",
"https://bit.ly/fcc-relaxing-cat"
]
},
"pt-br": {
"title": "Adicione imagens à sua página web",
"description": [
"Você pode adicionar imagens ao seu site usando o elemento img e apontando para a URL de uma imagem específica no atributo src.",
"Um exemplo disso seria:",
"<img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\">",
"Note que na maioria dos casos, elementos img possuem auto-fechamento (não precisam de tag de fechamento).",
"Todos os elementos img devem ter um atributo alt. O texto do atributo alt é 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 alt ao nosso exemplo acima:",
"<img src=\"https://www.a-fonte-da-sua-imagem.com/sua-imagem.jpg\" alt=\"Autor numa praia fazendo joinha.\">",
"
",
"Vamos tentar adicionar uma imagem ao nosso site:",
"Insira uma tag img, antes do elemento h2.",
"Agora coloque essa URL no seu atributo src:",
"https://bit.ly/fcc-relaxing-cat",
"Finalmente, não esqueça de dar à sua imagem um texto alt."
]
},
"ru": {
"title": "Добавьте изображения к вашему сайту",
"description": [
"Вы можете добавлять изображения к вашему сайту с помощью элемента img и указывать ссылки определённых изображений с помощтю атрибута src.",
"Примером добавления мзображения может служить:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">",
"Обратите внимание, что в большинстве случаев элементы img являются самозакрывающимися.",
"
",
"Попробуйте добавить изображение используя следующую ссылку:",
"https://bit.ly/fcc-relaxing-cat"
]
}
},
"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 anchor elements to link to content outside of your web page.",
"anchor elements need a destination web address called an href attribute. They also need anchor text. Here's an example:",
"<a href=\"https://freecodecamp.org\">this links to freecodecamp.org</a>",
"Then your browser will display the text \"this links to freecodecamp.org\" as a link you can click. And that link will take you to the web address https://www.freecodecamp.org.",
"
",
"Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text."
],
"challengeSeed": [
"CatPhotoApp
",
"",
" ",
" ",
" ",
" ![\"A](\"https://bit.ly/fcc-relaxing-cat\")
",
" ",
" Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
",
" Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
",
" "
],
"tests": [
"assert((/cat photos/gi).test($(\"a\").text()), 'message: Your a element should have the anchor text of \"cat photos\".');",
"assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an a element that links to http://freecatphotoapp.com ');",
"assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/a element has a closing tag.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Verlinke externe Seiten mit Anker Elementen",
"description": [
"a Elemente, auch bekannt als anchor (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verweisen.",
"So sieht ein a Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
"![\"Eine](\"https://i.imgur.com/hviuZwe.png\" "\\"Click")
",
"Hier ist ein Beispiel:",
"<p>Hier ist ein <a href=\"http://freecodecamp.org\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p>",
"
",
"Erstelle ein a Element, das auf http://freecatphotoapp.com verweist und den \"cat photos\" als anchor text (Link-Text) beinhaltet."
]
},
"es": {
"title": "Enlaza páginas externas con elementos ancla",
"description": [
"Los elementos a, también conocidos como elementos ancla, se utilizan para enlazar a contenido fuera de la página actual.",
"Aquí está un diagrama de un elemento a. En este caso, el elemento a se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
" ",
"He aquí un ejemplo:",
"<p>Aquí está un <a href=\"https://freecodecamp.org\"> enlace a freeCodeCamp</a> para que lo sigas.</p>",
"
",
"Crea un elemento a que se vincule a http://freecatphotoapp.com y tenga como texto de ancla \"fotos de gatos\"."
]
},
"pt-br": {
"title": "Crie links para páginas externas com elementos âncora",
"description": [
"Elementos a, também conhecidos como elementos âncora, são usados para criar links para conteúdo de fora da página atual.",
"Aqui está um diagrama de um elemento a. Nesse caso, o elemento a é usado no meio de um elemento de parágrafo, o que significa que esse link vai aparecer no meio de uma frase.",
"![\"um](\"https://i.imgur.com/QSCIiNH.png\" "\\"Clique")
",
"Aqui está um exemplo:",
"<p>Aqui está um <a href=\"http://freecodecamp.org\"> link para o freecodecamp.org</a> para você clicar.</p>",
"
",
"Crie um elemento a que vá para http://freecatphotoapp.com e tenha \"cat photos\" como seu texto âncora."
]
},
"ru": {
"title": "Присоедините внешние страницы с помощью якорных элементов",
"description": [
"Элементы a, также известные как якорные элементы, применяют для связи с содержимым вне текущей страницы.",
"Вот диаграмма элемента a. В этом случае, элемент a использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.",
"",
"Вот пример:",
"<p>Вот <a href=\"http://freecodecamp.org\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p>",
"
",
"Создайте элемент a, который присоединяет http://freecatphotoapp.com и имеет значение \"cat photos\" в качестве текста якоря."
]
}
}
},
{
"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 href attribute to a hash symbol # plus the value of the id attribute for the element that you want to internally link to, usually further down the page. You then need to add the same id attribute to the element you are linking to. An id is an attribute that uniquely describes an element.",
"Below is an example of an internal anchor link and its target element:",
"<a href=\"#contacts-header\">Contacts</a>
...
<h2 id=\"contacts-header\">Contacts</h2>
",
"When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.",
"
",
"Change your external link to an internal link by changing the href attribute to \"#footer\" and the text from \"cat photos\" to \"Jump to Bottom\".",
"Remove the target=\"_blank\" attribute from the anchor tag since this causes the linked document to open in a new window tab.",
"Then add an id attribute with a value of \"footer\" to the <footer> element at the bottom of the page."
],
"challengeSeed": [
"CatPhotoApp
",
"",
" ",
" cat photos",
" ",
" ",
" ",
" Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. 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. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
",
" 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.
",
" 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.
",
" ",
" ",
" ",
""
],
"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 footer tag on your page.');",
"assert($('a').eq(0).attr('href') == \"#footer\", 'message: The a tag should have an href attribute set to \"#footer\".');",
"assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'message: The a tag should not have a target attribute');",
"assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'message: The a text should be \"Jump to Bottom\".');",
"assert($('footer').eq(0).attr('id') == \"footer\", 'message: The footer tag should have an id 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 href, você usa o símbolo # e uma palavra para descrever a seção para a qual você quer pular.",
"Aqui está um exemplo:",
"<a href=\"#contact\">Ir para a seção de contato</a>",
"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 href, você deve usar o atributo name. Aqui está um exemplo:",
"<h1>Contato</h1>
<a name=\"contact\"></a>
",
"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 name.",
"
",
"Mude seu link externo para um link interno trocando seu atributo href para \"#bottom\" e o texto âncora de \"cat photos\" para \"Pular para o final\".",
"Então, adicione um elemento âncora com o atributo name como \"bottom\" depois do último parágrafo.",
"Nota
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.",
"<p>
Here's a <a href=\"http://freecodecamp.org\"> link to freecodecamp.org</a> for you to follow.
</p>
",
"Let's break down the example:",
"Normal text is wrapped in the p element:
<p> Here's a ... for you to follow. </p>",
"Next is the anchor element <a> (which requires a closing tag </a>):
<a> ... </a>",
"href is an anchor tag attribute that contains the URL address of the link:
<a href=\"http://freecodecamp.org\"> ... </a>",
"The text, \"link to freecodecamp.org\", within the anchor element called anchor text, will display a link to click:
<a href=\" ... \">link to freecodecamp.org</a>",
"The final output of the example will look like this:
Here's a link to freecodecamp.org for you to follow.
",
"
",
"Now nest your existing a element within a new p element (just after the existing main 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": [
"CatPhotoApp
",
"",
" ",
" cat photos",
" ",
" ",
" ",
" Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
",
" Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
",
" "
],
"tests": [
"assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'message: You need an a element that links to \"http://freecatphotoapp.com\".');",
"assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your a element should have the anchor text of \"cat photos\"');",
"assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new p element around your a element. There should be at least 3 total p 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 a element should be nested within your new p 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 p element should have the text \"View more \" (with a space after it).');",
"assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your a element should not have the text \"View more\".');",
"assert(code.match(/<\\/p>/g) && code.match(//g).length === code.match(/
p
elements has a closing tag.');",
"assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Anker Element mit einem Paragraphen umschließen",
"description": [
"Hier ist nochmal ein Beispiel für ein a Element:",
"",
"Hier ist ein Beispiel:",
"<p>Hier ist ein <a href=\"https://freecodecamp.org\"> Link zu freeCodeCamp</a> dem du folgen kannst.</p>",
"Nesting bedeutet, ein Element innerhalb eines anderen Elements zu schreiben",
"", "Jetzt umschließe dein
a Element mit einem neuen p Element (direkt nach dem bereits existierenden main Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text."
]
},
"es": {
"title": "Anida un elemento de ancla dentro de un párrafo",
"description": [
"Una vez más, aquí está un diagrama de un elemento a para tu referencia:",
"",
"He aquí un ejemplo:",
"<p>Aquí hay un <a href=\"https://freecodecamp.org\"> enlace a freeCodeCamp</a> para que lo sigas.</p>",
"Anidamiento simplemente significa poner un elemento dentro de otro elemento.",
"", "Ahora anida el elemento
a existente dentro de un nuevo elemento p (justo después del elemento main 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 a para você usar como referência:",
"",
"Veja um exemplo:",
"<p>Aqui está um <a href=\"https://freecodecamp.org\"> link para o freeCodeCamp</a> para você clicar.</p>",
"Aninhar significa colocar um elemento dentro de outro.",
"", "Agora, aninhe seu elemento
a existente a um novo elemento p (logo em seguida do elemento main 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": [
"Вот диаграмма элемента a:",
"",
"Вот пример:",
"<p>Вот <a href=\"https://freecodecamp.org\"> ссылка на freeCodeCamp</a> для перехода на ресурс.</p>",
"Вложенность значит установку одного элемента внутрь друго элемента.",
"", "Теперь вложите ваш существующий элемент
a внутрь нового элемента p (сразу после существующего элемента main) таким образом, что добавляемый параграф сообщает: \"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. Click the button below to open our study group directory.
Find your local study group and click it. This will take you to their Facebook group.
Click the
You'll get a notification from Facebook once the group has accepted you. Then you can go back and introduce yourself.
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
a elements to your website before you know where they will link.",
"This is also handy when you're changing the behavior of a link using JavaScript, which we'll learn about later.",
"", "The current value of the
href attribute is a link that points to \"http://freecatphotoapp.com\". Replace the href attribute value with a #, also known as a hash symbol, to create a dead link.",
"For example: href=\"#\""
],
"challengeSeed": [
"CatPhotoApp
", "Click here to view more cat photos.
", " ", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
", "a element should be a dead link with the value of the href attribute set to \"#\".');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle tote Links mit dem Hash Symbol",
"description": [
"Manchmal wirst du a Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.",
"Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir später noch behandeln.",
"", "Ersetze den Inhalt des
href Attributs deines a Elements mit einem #, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen."
]
},
"es": {
"title": "Haz vínculos muertos utilizando el símbolo de numero",
"description": [
"A veces quieres agregar elementos a a tu sitio web antes de saber qué enlazarán.",
"Esto también es útil cuando estás cambiando el comportamiento de un enlace usando jQuery, lo cual aprenderemos más adelante.",
"", "Reemplaza el atributo
href de tu elemento a con un #, también conocido como un símbolo de número o de hash, para convertirlo en un vínculo muerto."
]
},
"pt-br": {
"title": "Crie links mortos com hashtags",
"description": [
"Às vezes você vai querer adicionar elementos a 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 jQuery, que nós vamos aprender mais tarde.",
"", "O valor atual do atributo
href é \"http://freecatphotoapp.com\". Substitua esse valor por #, também conhecido como hashtag, para criar um link morto."
]
},
"ru": {
"title": "Создайте мёртвые ссылки используя хэш-символ",
"description": [
"Иногда вам нужно добавить элементы a к вашему сайту до того, как вы знаете куда будут вести ссылки.",
"Также это может оказаться полезно, когда вы меняете поведение ссылки используя jQuery, что мы изучим позже.",
"", "Замените значение атрибута
href вашего элемента a на #, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08820",
"title": "Turn an Image into a Link",
"description": [
"You can make elements into links by nesting them within an a element.",
"Nest your image within an a element. Here's an example:",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"></a>",
"Remember to use # as your a element's href property in order to turn it into a dead link.",
"", "Place the existing image element within an anchor element.", "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." ], "challengeSeed": [ "
CatPhotoApp
", "Click here to view more cat photos.
", " ", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
", "img element within an a element.');",
"assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your a element should be a dead link with a href attribute set to #.');",
"assert(code.match(/<\\/a>/g) && code.match(//g).length === code.match(/a elements has a closing tag.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Verlinke ein Bild",
"description": [
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem a Element umschließt.",
"", "Umschließe dein Bild mit einem
a Element. Hier ist ein Beispiel:",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>",
"Vergewissere dich, dass du ein # innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.",
"Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link."
]
},
"es": {
"title": "Convierte una imagen en un vínculo",
"description": [
"Puedes convertir elementos en enlaces al anidarlos dentro de un elemento a.",
"", "Anida tu imagen dentro de un elemento
a. He aquí un ejemplo: ",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a>",
"Recuerda usar # como atributo href de tu elemento a con el fin de convertirlo en un vínculo muerto.",
"Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
]
},
"pt-br": {
"title": "Transforme uma imagem em um link",
"description": [
"Você pode transformar elementos em links aninhando-os a um elemento a.",
"Aninhe sua imagem a um elemento a. Aqui está um exemplo:",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Três gatinhos correndo em direção à câmera.\"></a>",
"Lembre-se de usar # no atributo href do seu elemento a para que o link esteja morto.",
"", "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": [ "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов
a.",
"", "Вложите ваше изображение в элемент
a. Вот пример:",
"<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>",
"Не забывайте использовать # в качестве значения атрибута href вашего элемента a для превращения ссылки в мёртвую.",
"Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08827",
"title": "Create a Bulleted Unordered List",
"description": [
"HTML has a special element for creating unordered lists, or bullet point style lists.",
"Unordered lists start with an opening <ul> element, followed by any number of <li> elements. Finally, unordered lists close with a </ul>",
"For example: ",
"<ul>", "would create a bullet point style list of \"milk\" and \"cheese\".", "
<li>milk</li>
<li>cheese</li>
</ul>
", "Remove the last two
p elements and create an unordered list of three things that cats love at the bottom of the page."
],
"challengeSeed": [
"CatPhotoApp
", "Click here to view more cat photos.
", " ", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
", "ul element.');",
"assert($(\"ul li\").length > 2, 'message: You should have three li elements within your ul element.');",
"assert(code.match(/<\\/ul>/gi) && code.match(/- /gi).length === code.match(/
- cat nip ", "
- laser pointers ", "
- lasagna ", "
- /g) && code.match(/<\\/li>/g).length === code.match(/
- /g).length, 'message: Make sure your
lielement has a closing tag.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "title": "Erstelle eine geordnete Liste", "description": [ "HTML beinhaltet auch ein spezielles Element fürordered lists(geordnete/nummerierte Listen).", "Geordnete Listen starten mit einem<ol>Element. Dann enthalten sie eine gewisse Anzahl an<li>Elementen.", "Zum Beispiel:", "<ol>
", "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.", "
<li>Garfield</li>
<li>Sylvester</li>
</ol>
", "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 delistas ordenadas, o listas de estilo numerado.", "Las listas ordenadas comienzan con un elemento<ol>. Luego contienen un número de elementos<li>.", "Por ejemplo:", "<ol>
", "creará una lista numerada con \"Garfield\" y \"Sylvester\".", "
<li>Garfield</li>
<li>Sylvester</li>
</ol>
", "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 criarlistas ordenadas, ou listas numeradas.", "Listas ordenadas começam com um elementoole contêm diversos elementoslianinhados a ele.", "Por exemplo:", "<ol>
", "criaria uma lista numerada contendo \"Garfield\" e \"Frajola\".", "
<li>Garfield</li>
<li>Frajola</li>
</ol>
", "Crie uma lista ordenada com as 3 coisas que os gatos mais odeiam." ] }, "ru": { "title": "Создайте упорядоченный список", "description": [ "В HTML есть специальный элемент для созданияупорядоченных списков, или списков с номерами в качестве меток элементов.", "Упорядоченные списки начинаются с элемента<ol>. Далее они содержат некоторое количество элементов<li>.", "Например:", "<ol>
", "создаст нумерованный список из \"Garfield\" и \"Sylvester\".", "
<li>Garfield</li>
<li>Sylvester</li>
</ol>
", "Создайте нумерованный список из 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:", "<input type=\"text\" />", "Note thatinputelements are self-closing.", "
", "Create aninputelement of typetextbelow your lists." ], "challengeSeed": [ "CatPhotoApp
", "", " " ], "tests": [ "assert($(\"input[type=text]\").length > 0, 'message: Your app should have anClick here to view more cat photos.
", " ", "Things cats love:
", "- ",
"
- cat nip ", "
- laser pointers ", "
- lasagna ", "
Top 3 things cats hate:
", "- ",
"
- flea treatment ", "
- thunder ", "
- other cats ", "
inputelement of typetext.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "title": "Erstelle ein Textfeld", "description": [ "Nun erstellen wir ein Web Formular.", "Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.", "So kannst du eines erstellen:", "<input type=\"text\">", "Beachte, dassinputElemente selbstschließend sind.", "
", "Erstelle eininputElement des Typ (\"type\")textunter deinen Listen." ] }, "es": { "title": "Crea un campo de texto", "description": [ "Ahora vamos a crear un formulario web.", "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.", "Puedes crear uno como este:", "<input type=\"text\">", "Ten en cuenta que los elementosinputson de cierre automático.", "
", "Crea un elementoinputde tipotextdebajo 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:", "<input type=\"text\">", "Note que elementosinputtêm auto-fechamento.", "
", "Crie um elementoinputde tipotextabaixo das suas listas." ] }, "ru": { "title": "Создайте текстовое поле", "description": [ "Теперь давайте создадим web-форму.", "Поля текстового ввода - удобный способ получения данных от пользователя.", "Вы можете создать текстовое поле следующим образом:", "<input type=\"text\">", "Обратите внимание, что элементыinputсамозакрывающиеся.", "
", "Создайте элементinputтипаtextпод вашими списками." ] } } }, { "id": "bad87fee1348bd9aedf08830", "title": "Add Placeholder Text to a Text Field", "description": [ "Placeholder text is what is displayed in yourinputelement before your user has inputted anything.", "You can create placeholder text like so:", "<input type=\"text\" placeholder=\"this is placeholder text\">", "
", "Set theplaceholdervalue of your textinputto \"cat photo URL\"." ], "challengeSeed": [ "CatPhotoApp
", "", " " ], "tests": [ "assert($(\"input[placeholder]\").length > 0, 'message: Add aClick here to view more cat photos.
", " ", "Things cats love:
", "- ",
"
- cat nip ", "
- laser pointers ", "
- lasagna ", "
Top 3 things cats hate:
", "- ",
"
- flea treatment ", "
- thunder ", "
- other cats ", "
placeholderattribute to the existing textinputelement.');", "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(/inputelement should have valid syntax.');" ], "type": "waypoint", "challengeType": 0, "translations": { "de": { "title": "Füge Platzhalter zu einem Textfeld hinzu", "description": [ "Platzhaltertexte erscheinen in deineninputFeldern, bevor der Nutzer etwas eingibt.", "Du kannst Platzhalter auf folgende Weise erstellen:", "<input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">", "
", "Setze bei deineminputElement den Wert fürplaceholderauf \"cat photo URL\"." ] }, "es": { "title": "Agrega un texto de relleno a un campo de texto", "description": [ "El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.", "Puedes crear un texto de relleno de esta manera:", "<input type=\"text\" placeholder=\"este es un texto de relleno\">", "
", "Establece el valor deltexto de rellenode 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 seuinputquando ele está vazio.", "Você pode adicionar um placeholder ao seu campo de texto assim:", "<input type=\"text\" placeholder=\"esse é o placeholder\">", "
", "Coloque o placeholder \"cat photo URL\" no seuinputde texto." ] }, "ru": { "title": "Добавьте замещающий текст к текстовому полю", "description": [ "Ваш замещающий текст - это то, что отображается в виде текста внутриinputпока пользователь не ввёл туда что-либо.", "Вы можете создать замещающий текст следующим образом:", "<input type=\"text\" placeholder=\"это замещающий текст\">", "
", "Установите значение атрибутаplaceholderвашего текстового поляinputравными \"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 yourformelement.", "For example:", "<form action=\"/url-where-you-want-to-submit-form-data\"></form>", "
", "Nest your text field inside aformelement, and add theaction=\"/submit-cat-photo\"attribute to the form element." ], "challengeSeed": [ "CatPhotoApp
", "", " Click here to view more cat photos.
", " ", "Things cats love:
", "- ",
"
- cat nip ", "
- laser pointers ", "
- lasagna ", "
Top 3 things cats hate:
", "- ",
"
- flea treatment ", "
- thunder ", "
- other cats ", "
" ], "tests": [ "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a formelement.');", "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure yourformhas anactionattribute which is set to/submit-cat-photo');", "assert(code.match(/<\\/form>/g) && code.match(/
- ul element has a closing tag.');",
"assert(code.match(/<\\/li>/gi) && code.match(/
li elements have closing tags.');"
],
"type": "waypoint",
"challengeType": 0,
"translations": {
"de": {
"title": "Erstelle eine ungeordnete Liste",
"description": [
"HTML hat ein spezielles Element zum Erstellen von unordered lists (ungeordneten Listen).",
"Ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.",
"Zum Beispiel:",
"<ul>", "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.", "
<li>Milch</li>
<li>Käse</li>
</ul>
", "Entferne die letzten zwei
p Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite"
]
},
"es": {
"title": "Crea una lista no ordenada con viñetas",
"description": [
"HTML tiene un elemento especial para la creación de listas no ordenadas, o listas con estilo viñeta.",
"Las listas no ordenadas comienzan con un elemento <ul>. A continuación contienen una cantidad de elementos <li>.",
"Por ejemplo: ",
"<ul>", "creará una lista con viñetas y con elementos \"leche\" y \"queso\".", "
<li>leche</li>
<li>queso</li>
</ul>
", "Elimina los dos últimos elementos
p y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman."
]
},
"pt-br": {
"title": "Crie uma lista não ordenada com marcadores",
"description": [
"O HTML tem um elemento especial para criar listas não ordenadas, ou listas com marcadores.",
"Listas não ordenadas começam com um elemento ul e contêm diversos elementos li aninhados a ele.",
"Por exemplo: ",
"<ul>", "criaria uma lista com marcadores contendo \"leite\" e \"queijo\".", "
<li>leite</li>
<li>queijo</li>
</ul>
", "Remova os dois últimos elementos
p e crie no final da página uma lista não ordenada de três coisas que gatos adoram."
]
},
"ru": {
"title": "Создайте ненумерованный неупорядоченный список",
"description": [
"В HTML есть специальный элемент для создания неупорядоченного списка, или списка с точками в виде меток элементов.",
"Неупорядоченные списки начинаются с элемента <ul>. Затем они содержат некоторе количество элементов <li>.",
"Например: ",
"<ul>", "создаст ненумерованный список из \"milk\" и \"cheese\".", "
<li>milk</li>
<li>cheese</li>
</ul>
", "Удалите последние два элемента
p и создайте неупорядоченный список из трёх вещей, которые любят кошки."
]
}
}
},
{
"id": "bad87fee1348bd9aedf08828",
"title": "Create an Ordered List",
"description": [
"HTML has another special element for creating ordered lists, or numbered lists.",
"Ordered lists start with an opening <ol> element, followed by any number of <li> elements. Finally, ordered lists close with a </ol>",
"For example:",
"<ol>", "would create a numbered list of \"Garfield\" and \"Sylvester\".", "
<li>Garfield</li>
<li>Sylvester</li>
</ol>
", "Create an ordered list of the top 3 things cats hate the most." ], "challengeSeed": [ "
CatPhotoApp
", "Click here to view more cat photos.
", " ", "Things cats love:
", "- ",
"
Top 3 things cats hate:
", " ", "ul element.');",
"assert.equal($(\"ol\").length, 1, 'message: You should have only one ol element.');",
"assert.equal($(\"ul li\").length, 3, 'message: You should have three li elements within your ul element.');",
"assert.equal($(\"ol li\").length, 3, 'message: You should have three li elements within your ol element.');",
"assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/- /g).length, 'message: Make sure your
ul element has a closing tag.');",
"assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/- /g).length, 'message: Make sure your
ol element has a closing tag.');",
"assert(code.match(/<\\/li>/g) && code.match(/