5026 lines
374 KiB
JSON
5026 lines
374 KiB
JSON
{
|
||
"name": "HTML5 and CSS",
|
||
"order": 2,
|
||
"time": "5 hours",
|
||
"helpRoom": "Help",
|
||
"challenges": [
|
||
{
|
||
"id": "bd7123c8c441eddfaeb5bdef",
|
||
"descriptionPtBR": [
|
||
"Seja bem vindo ao primeiro desafio de programação do Free Code Camp!",
|
||
"Você pode editar o seu <code>código</code> em seu <code>editor de texto</code>, que embutimos aqui nesta página da web.",
|
||
"Consegue ver o código que diz <code><h1>Hello</h1></code> no seu editor de texto? Esse é um elemento HTML.",
|
||
"A maioria dos elementos HTML tem uma <code>tag de abertura</code> e uma <code>tag de fechamento</code>.",
|
||
"As tags de abertura são assim: <code><h1></code>. E as tags de fechamento são assim: <code></h1></code>.",
|
||
"Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).",
|
||
"Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.",
|
||
"Para passar nos testes deste desafio, mude o texto do elemento <code>h1</code> para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"."
|
||
],
|
||
"namePtBR": "Diga Olá aos Elementos HTML",
|
||
"descriptionDe": [
|
||
"Willkommen bei der ersten Programmier-Challenge von Free Code Camp!",
|
||
"Mithilfe des eingebauten <code>text editor</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, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.",
|
||
"Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.",
|
||
"Um den Test dieser Challenge zu bestehen, ändere den Text deines <code>h1</code> Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button."
|
||
],
|
||
"titleRU": "Скажи привет HTML-элементам",
|
||
"descriptionRU": [
|
||
"Добро пожаловать на первое программное испытание Free Code Camp.",
|
||
"Вы можете редактировать <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\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.",
|
||
"Для прохождения этого испытания измените текст элемента <code>h1</code> с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"."
|
||
],
|
||
"title": "Say Hello to HTML Elements",
|
||
"description": [
|
||
"Welcome to Free Code Camp's first coding challenge.",
|
||
"You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
|
||
"Do you see the code in your text 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>",
|
||
"Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
|
||
"Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing, you can advance to the next challenge.",
|
||
"To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button."
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello</h1>"
|
||
],
|
||
"tests": [
|
||
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'message: Your <code>h1</code> element should have the text \"Hello World\".');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Saluda a los Elementos HTML",
|
||
"descriptionEs": [
|
||
"¡Bienvenido/a al primer desafío de programación de Free Code Camp!",
|
||
"Puedes editar tu <code>código</code> en tu <code>editor de texto</code>, que hemos incrustado en esta página web.",
|
||
"¿Ves el código en tu editor de texto que dice <code><h1>Hello</h1></code>? Ese es un <code>elemento</code> HTML.",
|
||
"La mayoría de los elementos HTML tienen una <code>etiqueta de apertura</code> y una <code>etiqueta de cierre</code>.",
|
||
"Las etiquetas de apertura se ven como:",
|
||
"<code><h1></code>",
|
||
" Las etiquetas de cierre se ven como:",
|
||
"<code></h1></code>",
|
||
"Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).",
|
||
"Cada desafío tiene pruebas que puedes ejecutar en cualquier momento presionado el botón \"Run tests\". Una vez logres pasar todas las pruebas, podrás avanzar al siguiente desafío.",
|
||
"Para pasar la prueba en este desafío, cambia tu texto de la etiqueta <code>h1</code> para que diga \"Hello World\" en lugar de \"Hello\". Entonces presiona el botón \"Ejecutar pruebas\"."
|
||
],
|
||
"titleDe": "Begrüße die HTML Elemente",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf0887a",
|
||
"descriptionPtBR": [
|
||
"Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:",
|
||
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Clique para aumentar\" alt=\"Imagem do aplicativo CatPhotoApp finalizado\"></a>",
|
||
"O elemento <code>h2</code> que você criar gerará um elemento <code>h2</code> na página da web.",
|
||
"Este elemento indica ao navegador a forma de mostrar o texto que contém.",
|
||
"Os elementos <code>h2</code> são ligeiramente menores que os elementos <code>h1</code>. Há também os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>.",
|
||
"Adicione uma tag <code>h2</code> que diga \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo de seu elemento <code>h1</code> chamado \"Hello World\"."
|
||
],
|
||
"namePtBR": "Cabeçalho com o Elemento h2",
|
||
"descriptionDe": [
|
||
"In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:",
|
||
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//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.",
|
||
"Füge unter <code>h1</code> \"Hello World\" ein zweites HTML Element <code>h2</code> hinzu, in dem \"CatPhotoApp\" steht."
|
||
],
|
||
"titleRU": "Заголовок с применением элемента h2",
|
||
"descriptionRU": [
|
||
"В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:",
|
||
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//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> для обозначения отдельных секций.",
|
||
"Добавьте метку <code>h2</code> с текстом \"CatPhotoApp\" для создания второго HTML <code>элемента</code> под вашим элементом <code>h1</code> с текстом \"Hello World\"."
|
||
],
|
||
"title": "Headline with the h2 Element",
|
||
"description": [
|
||
"Over the next few challenges, we'll build an HTML5 app that will look something like this:",
|
||
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
|
||
"The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
|
||
"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 and new sections.",
|
||
"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",
|
||
"titleEs": "Encabezado con el elemento h2",
|
||
"descriptionEs": [
|
||
"Durante los siguientes desafíos, construiremos una aplicación HTML5 que lucirá como la siguiente:",
|
||
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Pulsa para agrandar\" alt=\"Pantallazo de la aplicación Cat Photo terminada\"></a>",
|
||
"El elemento <code>h2</code> que ingreses creará un elemento <code>h2</code> en el sitio web.",
|
||
"Este elemento le dice al navegador cómo mostrar el texto que contiene.",
|
||
"Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>",
|
||
"Agrega una etiqueta <code>h2</code> que diga \"CatPhotoApp\" para crear un segundo <code>elemento</code> HTML debajo de tu elemento <code>h1</code> \"Hello World\"."
|
||
],
|
||
"titleDe": "Überschrift mit dem h2 Element",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08801",
|
||
"descriptionPtBR": [
|
||
"Os elementos <code>p</code> são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".",
|
||
"Você pode criar um elemento <code>p</code> assim:",
|
||
"<code><p>Sou uma tag p!</p></code>",
|
||
"Crie um elemento <code>p</code> abaixo de seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"."
|
||
],
|
||
"namePtBR": "Informe com o Elemento Parágrafo",
|
||
"descriptionDe": [
|
||
"<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>",
|
||
"Erstelle ein <code>p</code> Element unter deinem <code>h2</code> Element und füge den Text \"Hello Paragraph\" ein."
|
||
],
|
||
"titleRU": "Проинформируйте с применением элемента p",
|
||
"descriptionRU": [
|
||
"Элементы <code>p</code> предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".",
|
||
"Вы можете создать элемент <code>p</code> следующим образом:",
|
||
"<code><p>Я метка p!</p></code>",
|
||
"Создайте элемент <code>p</code> под вашим элементом <code>h2</code> и присвойте ему текст \"Hello Paragraph\"."
|
||
],
|
||
"title": "Inform with the Paragraph Element",
|
||
"description": [
|
||
"<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
|
||
"You can create a <code>p</code> element like this:",
|
||
"<code><p>I'm a p tag!</p></code>",
|
||
"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",
|
||
"titleEs": "Informa con el Elemento Párrafo",
|
||
"descriptionEs": [
|
||
"Los elementos <code>p</code> son los elementos preferidos en los sitios web para los párrafos de texto en tamaño normal. La P es abreviatura de \"párrafo\".",
|
||
"Tú puedes crear un elemento párrafo de esta forma:",
|
||
"<code><p>¡Soy una etiqueta p!</p></code>",
|
||
"Crea un elemento <code>p</code> debajo de tu elemento <code>h2</code>, y ponle el texto \"Hello Paragraph\"."
|
||
],
|
||
"titleDe": "Informiere mit dem Paragraph Element",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08802",
|
||
"descriptionPtBR": [
|
||
"\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.",
|
||
"Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.",
|
||
"Você pode iniciar um comentário com <code><!--</code> e terminar seu comentário com <code>--></code>.",
|
||
"Remova o comentário dos elementos <code>h1</code>, <code>h2</code> e <code>p</code>."
|
||
],
|
||
"namePtBR": "Descomente o HTML",
|
||
"descriptionDe": [
|
||
"Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.",
|
||
"Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.",
|
||
"Du kannst einen Kommentar mit <code><!--</code> starten und ihn mit <code>--></code> wieder beenden.",
|
||
"Entkommentiere deine <code>h1</code>, <code>h2</code> und <code>p</code> Elemente."
|
||
],
|
||
"titleRU": "Раскомментируйте HTML",
|
||
"descriptionRU": [
|
||
"Комментирование - способ хранения заметок по коду без воздействия на сам код.",
|
||
"Также комментирование - неплохой метод отключения части кода без необходимости его удаления.",
|
||
"Вы можете начать комментарий с <code><!--</code> и закончить его <code>--></code>",
|
||
"Раскомментируйте свои элементы <code>h1</code>, <code>h2</code> и <code>p</code>."
|
||
],
|
||
"title": "Uncomment HTML",
|
||
"description": [
|
||
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
|
||
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
|
||
"You can start a comment with <code><!--</code> and end a comment with <code>--></code>",
|
||
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
|
||
],
|
||
"challengeSeed": [
|
||
"<!--",
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Hello Paragraph</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(!/-->/gi.test(code), 'message: Be sure to delete all trailing comment tags, i.e. <code>--></code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Quita comentarios HTML",
|
||
"descriptionEs": [
|
||
"\"Comentar\" es una manera en la que puedes dejar anotaciones en tu código sin afectar el código mismo.",
|
||
"Comentar también es una forma conveniente de desactivar código sin tener que borrarlo por completo.",
|
||
"Puedes comenzar un comentario con <code><!--</code> y terminar de comentar con <code>--></code>",
|
||
"Quita el comentario a los elementos <code>h1</code>, <code>h2</code> y <code>p</code>"
|
||
],
|
||
"titleDe": "HTML entkommentieren",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08804",
|
||
"descriptionPtBR": [
|
||
"Lembre-se que para iniciar um comentário você precisa utilizar <code><!--</code>, e para terminar um comentário é necessário usar <code>--></code>.",
|
||
"Aqui, você deverá terminar o comentário antes que seu elemento <code>h2</code> inicie.",
|
||
"Comente o elemento <code>h1</code> e o elemento <code>p</code>, e deixe o elemento <code>h2</code> sem nenhum comentário."
|
||
],
|
||
"namePtBR": "Comente o HTML",
|
||
"descriptionDe": [
|
||
"Denk daran, dass du einen Kommentar mit <code><!--</code> anfangen und mit <code>--></code> wieder beenden werden.",
|
||
"Hier wirst du deinen Kommentar vor dem <code>h2</code> Element beenden müssen.",
|
||
"Kommentiere die <code>h1</code> und <code>p</code> Elemente aus, aber lasse dein <code>h2</code> Element unkommentiert."
|
||
],
|
||
"titleRU": "Закомментируйте HTML",
|
||
"descriptionRU": [
|
||
"Помните, что для начала комментария вам необходимо использовать <code><!--</code>, а для завершения комментария - <code>--></code>",
|
||
"Тут вам необходимо завершить комментарий до начала вашего элемента <code>h2</code>.",
|
||
"Закомментируйте ваши элементы <code>h1</code> и <code>p</code>, но оставьте ваш элемент <code>h2</code> раскомментированным."
|
||
],
|
||
"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.",
|
||
"Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented."
|
||
],
|
||
"challengeSeed": [
|
||
"<!--",
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Hello Paragraph</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(/-->/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",
|
||
"titleEs": "Comenta en HTML",
|
||
"descriptionEs": [
|
||
"Recuerda que para comenzar un comentario, necesitas usar <code><!--</code> y para terminar un comentario, necesitas usar <code>--></code>",
|
||
"Aquí necesitarás terminar el comentario antes que comience el elemento <code>h2</code>.",
|
||
"Comenta el elemento <code>h1</code> y el elemento <code>p</code>, pero deja sin comentar el elemento <code>h2</code>"
|
||
],
|
||
"titleDe": "HTML auskommentieren",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08833",
|
||
"descriptionPtBR": [
|
||
"Desenvolvedores web tradicionalmente usam <code>Lorem Ipsum</code> como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.",
|
||
"O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.",
|
||
"Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado <code>Kitty Ipsum</code>.",
|
||
"Substitua o texto dentro do seu elemento <code>p</code> pelas primeiras palavras deste texto 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>"
|
||
],
|
||
"namePtBR": "Preencha Espaços com Texto de Espaço Reservado",
|
||
"descriptionDe": [
|
||
"Webentwickler nutzen für gewöhnlich \"Lorem Ipsum Text\" als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.",
|
||
"\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.",
|
||
"Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber <code>kitty ipsum text</code> nutzen.",
|
||
"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>"
|
||
],
|
||
"titleRU": "Заполните пустоты замещающим текстом",
|
||
"descriptionRU": [
|
||
"Традиционно web-разработчики используют текст <code>lorem ipsum</code> в качестве замещающего текста. Он называется тектсом <code>lorem ipsum</code> по первым двум словам известного пассажа Цицерона из Древнего Рима.",
|
||
"Текст <code>lorem ipsum</code> применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.",
|
||
"5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом <code>kitty ipsum</code>.",
|
||
"Замените текст внутри вашего элемента <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>"
|
||
],
|
||
"title": "Fill in the Blank with Placeholder Text",
|
||
"description": [
|
||
"Web developers traditionally use <code>lorem ipsum text</code> as placeholder text. It's called lorem ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
|
||
"Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
|
||
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>.",
|
||
"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",
|
||
"titleEs": "Llena espacios con texto de relleno",
|
||
"descriptionEs": [
|
||
"Los desarrolladores web tradicionalmente usan <code>Lorem Ipsum</code> como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.",
|
||
"El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.",
|
||
"Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos un texto llamado <code>Kitty Ipsum</code>!",
|
||
"Reemplaza el texto dentro de tu elemento <code>p</code> con las primeras palabras de este texto 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>"
|
||
],
|
||
"titleDe": "Fülle die Lücken mit Platzhalter-Text",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fed1348bd9aedf08833",
|
||
"descriptionPtBR": [
|
||
"Nosso celular não possui muito espaço vertical.",
|
||
"Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.",
|
||
"Apague o elemento <code>h1</code> para simplificar o nosso espaço."
|
||
],
|
||
"namePtBR": "Apague Elementos HTML",
|
||
"descriptionDe": [
|
||
"Unser Smartphone hat nicht sehr viel vertikalen Platz.",
|
||
"Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp entwickeln können.",
|
||
"Lösche die Elemente <code>h1</code>, damit wir etwas Ordnung schaffen."
|
||
],
|
||
"titleRU": "Удалите HTML-элементы",
|
||
"descriptionRU": [
|
||
"Наш телефон не очень большой по-вертикали.",
|
||
"Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.",
|
||
"Удалите ваш <code>h1</code> элемент, чтобы упростить общий вид."
|
||
],
|
||
"title": "Delete HTML Elements",
|
||
"description": [
|
||
"Our phone doesn't have much vertical space.",
|
||
"Let's remove the unnecessary elements so we can start building our CatPhotoApp.",
|
||
"Delete your <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",
|
||
"titleEs": "Borra elementos HTML",
|
||
"descriptionEs": [
|
||
"Nuestro teléfono no tiene mucho espacio vertical.",
|
||
"Eliminemos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp.",
|
||
"Borra el elemento <code>h1</code> para simplificar nuestra vista."
|
||
],
|
||
"titleDe": "Entferne HTML Elemente",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08803",
|
||
"descriptionPtBR": [
|
||
"Agora vamos substituir a cor de parte do nosso texto.",
|
||
"Podemos fazer isso mudando o <code>style</code> do elemento <code>h2</code>.",
|
||
"A propriedade de estilo responsável pela cor do texto se chama \"color\".",
|
||
"Você pode mudar a cor do texto de seu elemento <code>h2</code> para azul assim:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"Mude o estilo do elemento <code>h2</code> para que seu texto fique com a cor vermelha."
|
||
],
|
||
"namePtBR": "Substitua a Cor do Texto",
|
||
"descriptionDe": [
|
||
"Lass uns jetzt die Farbe von unserem Text ändern.",
|
||
"Wir können das bewerkstelligen, indem wir den <code>style</code> des <code>h2</code> Elements ändern.",
|
||
"Der Style, der zuständig für die Textfarbe eines Elements ist, ist der \"color\" Style.",
|
||
"So könntest du die Textfarbe des <code>h2</code> Elements in Blau ändern:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"Ändere den Style des <code>h2</code> Elements, damit die Textfarbe rot (\"red\") ist."
|
||
],
|
||
"titleRU": "Измените цвет текста",
|
||
"descriptionRU": [
|
||
"Теперь давайте изменим цвет части нашего текста.",
|
||
"Мы можем сделать это изменив <code>style</code> нашего элемента <code>h2</code>.",
|
||
"Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".",
|
||
"Вот как вы могли бы установить цвет текста вашего элемента <code>h2</code> синим:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"Измените стиль вашего элемента <code>h2</code> таким образом, чтобы текст элемента стал красным."
|
||
],
|
||
"title": "Change the Color of Text",
|
||
"description": [
|
||
"Now let's change the color of some of our text.",
|
||
"We can do this by changing the <code>style</code> of your <code>h2</code> element.",
|
||
"The style that is responsible for the color of an element's text is the \"color\" style.",
|
||
"Here's how you would set your <code>h2</code> element's text color to blue:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"Change your <code>h2</code> element's style so that its text color is red."
|
||
],
|
||
"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($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Cambia el color del texto",
|
||
"descriptionEs": [
|
||
"Ahora cambiemos el color de parte de nuestro texto.",
|
||
"Podemos hacer esto cambiando el <code>style</code> del elemento <code>h2</code>",
|
||
"La propiedad de estilo responsable del color de texto es \"color\".",
|
||
"Así es como podrías poner en azul el color de texto de tu elemento <code>h2</code>:",
|
||
"<code><h2 style=\"color: blue\">CatPhotoApp</h2></code>",
|
||
"Cambia el estilo del elemento <code>h2</code> de manera que el color de su texto sea rojo."
|
||
],
|
||
"titleDe": "Ändere die Farbe des Textes",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08805",
|
||
"descriptionPtBR": [
|
||
"Com o CSS, existem centenas de <code>propriedades</code> que você pode utilizar para modificar a forma de como um elemento pode ser visto em uma página da internet.",
|
||
"Quando você usou o <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, você deu ao elemento <code>h2</code> um <code>estilo inline</code>.",
|
||
"Essa é uma forma de adicionar estilos a um elemento, mas o jeito recomendado para isso é utilizar <code>Folhas de Estilo em Cascata (Cascading Style Sheets, CSS)</code>.",
|
||
"Acima de seu código, crie um elemento <code>style</code> como esse: <code><style></style></code>",
|
||
"Dentro do elemento style, é possível criar um <code>seletor CSS</code> para todos os elementos <code>h2</code>. Por exemplo, se você quiser que todos os elementos <code>h2</code> tenham a cor vermelha, seu elemento style será assim:",
|
||
"<code><style></code>",
|
||
" <code>h2 {color: red;}</code>",
|
||
"<code></style></code>",
|
||
"Observe que é importante utilizar as chaves de abertura e de fechamento (<code>{</code> e <code>}</code>) ao redor do estilo de cada elemento. Também é necessário que o estilo de seu elemento esteja entre as tags de abertura e fechamento. Por fim, não se esqueça de adicionar o ponto-e-vírgula no final de cada um dos estilos de seu elemento.",
|
||
"Apague o atributo <code>style</code> de seu elemento <code>h2</code> e então crie um elemento <code>style</code> CSS. Adicione o CSS necessário para fazer com que todos os elementos <code>h2</code> tenham a cor azul."
|
||
],
|
||
"namePtBR": "Use Seletores CSS para Estilizar Elementos",
|
||
"descriptionDe": [
|
||
"CSS liefert dir hunderte Attribute oder <code>properties</code> um HTML Elemente auf deiner Seite zu gestalten.",
|
||
"Mit <code><h2 style=\"color: red\">CatPhotoApp</h2></code> hast du dem einzelnen <code>h2</code> Element einen sogenannten <code>inline style</code> gegeben.",
|
||
"Das ist ein Weg, um Elemente zu gestalten. Es ist aber besser <code>CSS</code>, was für <code>Cascading Style Sheets</code> steht, zu benutzen.",
|
||
"Erstelle über deinem Code ein <code>style</code> Element:",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"Innerhalb des Style Elements kannst du einen <code>CSS selector</code> für alle <code>h2</code> Elemente erstellen. Wenn du zum Beispiel alle <code>h2</code> Elemente rot färben willst, schreibst du:",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Beachte, dass du öffnende und schließende geschwungene Klammern (<code>{</code> und <code>}</code>) um jeden Style setzen musst. Außerdem musst du sichergehen, dass deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon.",
|
||
"Lösche das Style Attribute deines <code>h2</code> Elements und erstelle stattdessen ein CSS <code>style</code> Element. Füge das notwendige CSS hinzu, um alle <code>h2</code> Elemente Blau zu färben."
|
||
],
|
||
"titleRU": "Используйте CSS-селекторы для стилизации элементов",
|
||
"descriptionRU": [
|
||
"В CSS существуют сотни CSS-<code>свойств</code>, которые вы можете использовать для изменения внешнего вида элементов вашей страницы.",
|
||
"Когда вы вводите <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, вы присваиваете определённому <code>h2</code> элементу <code>встроенный стиль</code>.",
|
||
"Это один из способов добавления стиля к элементу, но лучший способ - использование <code>CSS</code>, который является сокращением от <code>Cascading Style Sheets (Каскадные таблицы стилей)</code>.",
|
||
"Вверху вашего кода создайте элемент <code>style</code> следующим образом:",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"Внутри этого элемента <code>style</code> вы можете создать <code>CSS-селектор</code> для всех элементов <code>h2</code> в документе. Например, если бы вы хотели, чтобы все элементы <code>h2</code> были красными, ваш элемент <code>style</code> выглядел бы следующим образом:",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок (<code>{</code> и <code>}</code>) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента <code>style</code>. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.",
|
||
"Удалите атрибут стиль вашего элемента <code>h2</code> и взамен создайте CSS-элемент <code>style</code>. Добавьте необходимый CSS, чтобы все элементы <code>h2</code> стали синими."
|
||
],
|
||
"title": "Use CSS Selectors to Style Elements",
|
||
"description": [
|
||
"With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
|
||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
|
||
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
|
||
"At the top of your code, create a <code>style</code> element like this:",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"Inside that style element, you can create a <code>CSS selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this:",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles.",
|
||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue."
|
||
],
|
||
"challengeSeed": [
|
||
"<h2 style=\"color: red\">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(!$(\"h2\").attr(\"style\"), 'message: Remove the style attribute from your <code>h2</code> element.');",
|
||
"assert($(\"style\") && $(\"style\").length > 1, 'message: Create a <code>style</code> element.');",
|
||
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h2</code> element should be blue.');",
|
||
"assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'message: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');",
|
||
"assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'message: Make sure all your <code>style</code> elements are valid and have a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Usa selectores CSS para dar estilo a los elementos",
|
||
"descriptionEs": [
|
||
"Con CSS, hay cientos de <code>propiedades CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.",
|
||
"Cuando ingresaste <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, le estuviste dando al elemento <code>h2</code> un <code>estilo en línea</code>",
|
||
"Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando <code>Hojas de Estilo en Cascada (Cascading Style Sheets, CSS)</code>.",
|
||
"Al principio de tu código, crea un elemento <code>style</code> como este:",
|
||
"<blockquote><style><br></style></blockquote>",
|
||
"Dentro de ese elemento style, puedes crear un <code>selector CSS</code> para todos los elementos <code>h2</code>. Por ejemplo, si quisieras que todos los elementos <code>h2</code> fueran rojos, tu elemento style se vería así:",
|
||
"<blockquote><style><br> h2 {color: red;}<br></style></blockquote>",
|
||
"Fíjate que es importante tener llaves de apertura y de cierre (<code>{</code> y <code>}</code>) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento esté entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento.",
|
||
"Borra el atributo <code>style</code> de tu elemento <code>h2</code> y a cambio escribe un elemento <code>style</code> CSS. Agrega el CSS necesario para hacer todos los elementos <code>h2</code> de color azul."
|
||
],
|
||
"titleDe": "Nutze CSS Selektoren um Elemente zu stylen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aecf08806",
|
||
"descriptionPtBR": [
|
||
"As classes são estilos reutilizáveis que podem ser adicionadas a elementos HTML.",
|
||
"Aqui está um exemplo de como declarar uma classe com CSS:",
|
||
"<code><style></code>",
|
||
"<code> .blue-text {</code>",
|
||
"<code> color: blue;</code>",
|
||
"<code> }</code>",
|
||
"<code></style></code>",
|
||
"Veja que criamos uma classe CSS chamada \"blue-text\" no interior da tag <code><style></code>.",
|
||
"Você pode aplicar uma classe a um elemento HTML assim:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Note que em seu elemento <code>style</code> CSS, as classes devem começar com um ponto. Já nos elementos HTML, as declarações de classes não devem começar com o ponto.",
|
||
"Ao invés de criar um novo elemento <code>style</code>, tente eliminar a declaração de estilo de <code>h2</code> dos elementos de estilo existentes, e troque ela pela declaração de classe <code>.red-text</code>.",
|
||
"Crie uma classe CSS chamada <code>red-text</code> e então a aplique em seu elemento <code>h2</code>."
|
||
],
|
||
"namePtBR": "Use Classes CSS para Estilizar Elementos",
|
||
"descriptionDe": [
|
||
"Klassen sind wiederverwendbare Styles, die HTML Elementen zugewiesen werden können.",
|
||
"So sieht eine CSS Klasse aus:",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"Du siehst, dass wir die CSS Klasse <code>blue-text</code> innerhalb von <code><style></code> geschrieben haben.",
|
||
"Du kannst eine Klasse folgendermaßen einem HTML Element beifügen:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Beachte, dass Klassen in deinem CSS <code>style</code> Element mit einem Punkt beginnen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.",
|
||
"Ändere deinen <code>h2</code> Selektor innerhalb deines <code>style</code> Elements zu <code>.red-text</code> und ändere den Farbwert von <code>blue</code> zu <code>red</code>.",
|
||
"Gib deinem <code>h2</code> Element das <code>class</code> Attribut mit dem Wert <code>'red-text'</code>."
|
||
],
|
||
"titleRU": "Используйте CSS-класс для стилизации элемента",
|
||
"descriptionRU": [
|
||
"Классы являются повторно применяемыми стилями, которые могут быть добавлены к HTML-элементам.",
|
||
"Вот пример объявления CSS-класса:",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"Вы можете увидеть, что мы создали CSS-класс названный <code>blue-text</code> внутри элемента <code><style></code>.",
|
||
"Вы можете применить класс к HTML-элементу следующим образом:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Обратите внимание, что в вашем CSS-элементе <code>style</code> названию классов следует начинаться с точки. При присваивании классов HTML-элементам названия классов не должны начинаться с точки.",
|
||
"Внутри вашего элемента <code>style</code>, замените селектор <code>h2</code> на <code>.red-text</code> и измените значение цвета с <code>blue</code> на <code>red</code>.",
|
||
"Присвойте вашему элементу <code>h2</code> атрибут <code>class</code> со значением <code>'red-text'</code>."
|
||
],
|
||
"title": "Use a CSS Class to Style an Element",
|
||
"description": [
|
||
"Classes are reusable styles that can be added to HTML elements.",
|
||
"Here's an example CSS class declaration:",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"You can see that we've created a CSS class called <code>blue-text</code> within the <code><style></code> tag.",
|
||
"You can apply a class to an HTML element like this:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
|
||
"Inside your <code>style</code> element, change the <code>h2</code> selector to <code>.red-text</code> and update the color's value from <code>blue</code> to <code>red</code>.",
|
||
"Give your <code>h2</code> element the <code>class</code> attribute with a value of <code>'red-text'</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" h2 {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<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($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');",
|
||
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.');",
|
||
"assert(code.match(/\\.red-text\\s*\\{\\s*color\\s*:\\s*red;\\s*\\}/g), 'message: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.');",
|
||
"assert($(\"h2\").attr(\"style\") === undefined, 'message: Do not use inline style declarations like <code>style=\"color: red\"</code> in your <code>h2</code> element.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Utiliza una clase CSS para darle estilo a un elemento",
|
||
"descriptionEs": [
|
||
"Las clases son estilos reutilizables que pueden añadirse a elementos HTML.",
|
||
"Aquí esta un ejemplo de una declaración de una clase CSS:",
|
||
"<blockquote><style><br> .blue-text {<br> color: blue;<br> }<br></style></blockquote>",
|
||
"Puedes ver que hemos creado una clase CSS llamada \"blue-text\" dentro de la etiqueta <code><style></code>",
|
||
"Puedes aplicar una clase a un elemento HTML de esta manera:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Nota que en tu elemento <code>style</code> CSS, las clases deben comenzar con un punto. En los elementos HTML, las declaraciones de clase, NO deben comenzar con punto. ",
|
||
"Dentro de tu elemento <code>style</code>, cambia el selector <code>h2</code> por <code>.red-text</code> y cambia el valor del color de <code>blue</code> a <code>red</code>.",
|
||
"Dale a tu elemento <code>h2</code> el atributo <code>class</code> con el valor de <code>'red-text'</code>."
|
||
],
|
||
"titleDe": "Nutze eine CSS Klasse um ein Element zu gestalten",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aefe08806",
|
||
"descriptionPtBR": [
|
||
"Lembre-se que é possível adicionar classes a elementos HTML ao utilizar <code>class=\"sua-classe-aqui\"</code> dentro da tag de abertura do elemento.",
|
||
"Relembre também que os seletores de classes CSS exigem um ponto em seu início, assim:",
|
||
"<code>.blue-text {</code>",
|
||
"<code> color: blue;</code>",
|
||
"<code>}</code>",
|
||
"Contudo, não se esqueça que as declarações de classes em elementos não utilizam ponto, assim:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp<h2></code>",
|
||
"Adicione a classe <code>red-text</code> aos seus elementos <code>h2</code> e <code>p</code>."
|
||
],
|
||
"namePtBR": "Estilize Múltiplos Elementos com uma Classe CSS",
|
||
"descriptionDe": [
|
||
"Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel <code>class=\"deine-klasse\"</code> innerhalb des öffnenden Tags schreibst.",
|
||
"Vergiss nicht dass CSS Klassenselektoren einen Punkt am Anfang brauchen:",
|
||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||
"Aber Klassen-Deklarationen brauchen keinen Punkt:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Füge die <code>red-text</code> Klasse deinem <code>h2</code> und <code>p</code> Element hinzu."
|
||
],
|
||
"titleRU": "Стилизуйте множество элементов с помощью CSS-класса",
|
||
"descriptionRU": [
|
||
"Помните, что вы можете присваивать классы HTML-элементам используя <code>class=\"ваш-класс-тут\"</code> внутри открывающей метки соответствующего элемента.",
|
||
"Помните, что селекторы CSS-классов должны начинаться с точки, например:",
|
||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||
"Но также не забывайте, что присваивание классов не использует точку, например:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Примените класс <code>red-text</code> к вашим элементам <code>h2</code> и <code>p</code>."
|
||
],
|
||
"title": "Style Multiple Elements with a CSS Class",
|
||
"description": [
|
||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||
"Remember that CSS class selectors require a period at the beginning like this:",
|
||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||
"But also remember that class declarations don't use a period, like this:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp</h2></code>",
|
||
"Apply the <code>red-text</code> class to your <code>h2</code> and <code>p</code> elements."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">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($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>h2</code> element should be red.');",
|
||
"assert($(\"h2\").hasClass(\"red-text\"), 'message: Your <code>h2</code> element should have the class <code>red-text</code>.');",
|
||
"assert($(\"p\").css(\"color\") === \"rgb(255, 0, 0)\", 'message: Your <code>p</code> element should be red.');",
|
||
"assert($(\"p\").hasClass(\"red-text\"), 'message: Your <code>p</code> element should have the class <code>red-text</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Da estilo a múltiples elementos con una clase CSS",
|
||
"descriptionEs": [
|
||
"Recuerda que puedes adjuntar clases a elementos HTML utilizando <code>class=\"tu-clase-aqui\"</code> dentro de la etiqueta de apertura del elemento mismo.",
|
||
"Recuerda que los selectores de clase CSS requieren un punto al principio, así:",
|
||
"<blockquote>.blue-text {<br> color: blue;<br>}</blockquote>",
|
||
"Pero recuerda también que las declaraciones de clase en elementos NO llevan punto:",
|
||
"<code><h2 class=\"blue-text\">CatPhotoApp<h2></code>",
|
||
"Aplica la clase <code>red-text</code> a tus elementos <code>h2</code> y <code>p</code>"
|
||
],
|
||
"titleDe": "Gestalte mehrere Elemente mit einer CSS Klasse",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08806",
|
||
"descriptionPtBR": [
|
||
"O tamanho da fonte é controlado pela propriedade CSS \"font-size\", como aqui:",
|
||
"<code>h1 {</code>",
|
||
"<code> font-size: 30px;</code>",
|
||
"<code>}</code>",
|
||
"Crie um segundo elemento <code>p</code> que tenha o seguinte texto Kitty 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>",
|
||
"Dentro da mesma tag <code><style></code> que criamos para sua classe <code>red-text</code>, modifique o <code>font-size</code> dos elementos <code>p</code> para que tenha um tamanho de 16 pixels (<code>16px</code>)."
|
||
],
|
||
"namePtBR": "Mude o Tamanho da Fonte de um Elemento",
|
||
"descriptionDe": [
|
||
"Schriftgröße wird von dem CSS Attribut <code>font-size</code> kontrolliert:",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"Erstelle ein zweites <code>p</code> Element mit dem folgenden 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>",
|
||
"Erstelle dann innerhalb deines <code><style></code> Elements, das auch deine <code>red-text</code> Klasse enthält, einen Eintrag für <code>p</code> Elemente und setzte <code>font-size</code> auf 16 Pixel (<code>16px</code>).",
|
||
"<strong>Notiz</strong><br>Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen.",
|
||
"Füge bitte auch kein Klassenattribute zu deinem neuen <code>p</code> Element hinzu."
|
||
],
|
||
"titleRU": "Измените размер шрифта элемента",
|
||
"descriptionRU": [
|
||
"Размером шрифта управляют с помощтю CSS-своайства <code>font-size</code>, например:",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"Создайте второй элемент <code>p</code> со следующи текстом <code>kitty ipsum</code>: <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>",
|
||
"Внутри того же элемента <code><style></code>, который содержит ваш класс <code>red-text</code>, создайте вхождение для элементов <code>p</code> и установите свойство <code>font-size</code> равным 16 пикселей (<code>16px</code>).",
|
||
"<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания.",
|
||
"Также, пожалуйста, не добавляйте атрибут класс к вашему новому элементу <code>p</code>."
|
||
],
|
||
"title": "Change the Font Size of an Element",
|
||
"description": [
|
||
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"Create a second <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>",
|
||
"Inside the same <code><style></code> tag that contains your <code>red-text</code> class, create an entry for <code>p</code> elements and set the <code>font-size</code> to 16 pixels (<code>16px</code>).",
|
||
"<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.",
|
||
"Also, please do not add a class attribute to your new <code>p</code> element."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</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($(\"p:not([class])\").length === 1, 'message: Do not add a class attribute to the second <code>p</code> element.');",
|
||
"assert(parseInt($(\"p:not([class])\").css(\"font-size\"), 10) > 15, 'message: Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Cambia el tamaño de fuente de un elemento.",
|
||
"descriptionEs": [
|
||
"El tamaño de fuente es controlado por la propiedad CSS \"font-size\", como aquí:",
|
||
"<blockquote>h1 {<br> font-size: 30px;<br>}</blockquote>",
|
||
"Crea un segundo elemento <code>p</code> con el siguiente texto kitty 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>",
|
||
"Dentro de la misma etiqueta <code><style></code> que creamos para tu clase <code>red-text</code>, pon el <code>font-size</code> de los elementos <code>p</code> a 16 pixeles (<code>16px</code>).",
|
||
"<strong>Nota</strong><br>Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío.",
|
||
"Además, no agregues ningún atributo de clase a tu elemento <code>p</code>."
|
||
],
|
||
"titleDe": "Ändere die Schriftgröße eines Elements",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08807",
|
||
"descriptionPtBR": [
|
||
"Você pode estabelecer o estilo de fonte para um elemento ao utilizar a propriedade <code>font-family</code>.",
|
||
"Por exemplo, se você quiser estabelecer o estilo de fonte de seu elemento <code>h2</code> como <code>Sans-serif</code>, você poderá utilizar o seguinte código em CSS:",
|
||
"<code>h2 {</code>",
|
||
"<code> font-family: Sans-serif;</code>",
|
||
"<code>}</code>",
|
||
"Faça com que todos os elementos <code>p</code> utilizem o estilo de fonte <code>Monospace</code>."
|
||
],
|
||
"namePtBR": "Defina a Fonte para um Elemento",
|
||
"descriptionDe": [
|
||
"Du kannst einem Element mit <code>font-family</code> eine Schriftart zuweisen.",
|
||
"Wenn du zum Beispiel deinem <code>h2</code> Element die Schriftart <code>Sans-serif</code> zuweisen willst, kannst du das mit dem folgenden CSS tun:",
|
||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||
"Definiere für alle <code>p</code> Elemente die Schriftart <code>Monospace</code>."
|
||
],
|
||
"titleRU": "Установите семейство шрифтов для элемента",
|
||
"descriptionRU": [
|
||
"Вы можете установить семейство шрифтов для элемента используя свойство <code>font-family</code>.",
|
||
"Например, если бы вы хотели установить семейство шрифтов <code>Sans-serif</code> для вашего элемента <code>h2</code>, вы бы использовали следующий CSS:",
|
||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||
"Присвойте шрифт <code>Monospace</code> всем вашим элементам <code>p</code>."
|
||
],
|
||
"title": "Set the Font Family of an Element",
|
||
"description": [
|
||
"You can set an element's font by using the <code>font-family</code> property.",
|
||
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS:",
|
||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</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>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> elements should use the font <code>Monospace</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Establecer la familia del tipo de letra de un elemento",
|
||
"descriptionEs": [
|
||
"Puedes establecer el tipo de letra de un elemento usando la propiedad <code>font-family</code>.",
|
||
"Por ejemplo, si quieres establecer el tipo de letra de tu elemento <code>h2</code> como <code>Sans-serif</code>, usa el siguiente CSS:",
|
||
"<blockquote>h2 {<br> font-family: Sans-serif;<br>}</blockquote>",
|
||
"Haz que todos tus elementos <code>p</code> utilicen el tipo de letra <code>Monospace</code>."
|
||
],
|
||
"titleDe": "Definiere die Schriftart eines Elements",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08807",
|
||
"descriptionPtBR": [
|
||
"Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.",
|
||
"Primeiro, faça um <code>chamado</code> ao Google Fonts para poder utilizar a fonte chamada <code>Lobster</code> e carregá-la em seu HTML.",
|
||
"Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Agora, estableça <code>Lobster</code> como o valor para font-family em seu elemento <code>h2</code>."
|
||
],
|
||
"namePtBR": "Importe uma Fonte a Partir do Google Fonts",
|
||
"descriptionDe": [
|
||
"Lass uns jetzt eine Google Font importieren und verwenden. (Beachte dass du diese Challenge überspringen musst, falls Google in deinem Land blockiert wird)",
|
||
"Zuerst musst du einen <code>call</code> (Anfrage) an Google machen um um auf <code>Lobster</code> zugreifen und in dein HMTL einbinden zu können.",
|
||
"Kopiere den folgenden Code und füge diesen in deinen Editor oben ein:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem <code>h2</code> Element hinzufügen.",
|
||
"Füge dem <code>h2</code> Element die Schriftart oder <code>font-family</code> <code>Lobster</code> hinzu."
|
||
],
|
||
"titleRU": "Импортируйте шрифт Google",
|
||
"descriptionRU": [
|
||
"Теперь давайте импортируем и применим шрифт Google (обратите внимание, что если Google заблокирован в ваней стране, вам нужно будет пропустить это испытание).",
|
||
"Сначала вам понадобится сделать <code>запрос</code> к Google для получения шрифта <code>Lobster</code> и загрузить его в ваш HTML.",
|
||
"Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Теперь вы можете установить шрифт <code>Lobster</code> в качестве значения семейства шрифтов для вашего <code>h2</code>.",
|
||
"Примените свойство <code>font-family</code> со значением <code>Lobster</code> к вашему элементу <code>h2</code>."
|
||
],
|
||
"title": "Import a Google Font",
|
||
"description": [
|
||
"Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).",
|
||
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
|
||
"Copy the following code snippet and paste it into the top of your code editor:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element.",
|
||
"Apply the <code>font-family</code> of <code>Lobster</code> to your <code>h2</code> element."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert(new RegExp(\"googleapis\", \"gi\").test(code), 'message: Import the <code>Lobster</code> font.');",
|
||
"assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'message: Your <code>h2</code> element should use the font <code>Lobster</code>.');",
|
||
"assert($(\"p\").css(\"font-family\").match(/monospace/i), 'message: Your <code>p</code> element should still use the font <code>Monospace</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Importar un tipo de letra de Google",
|
||
"descriptionEs": [
|
||
"Ahora, importemos y apliquemos un tipo de letra de Google (ten en cuenta que si Google está bloqueado en tu país, deberás saltarte este desafío).",
|
||
"Primero, haz un <code>llamado</code> a Google para obtener el tipo de letra <code>Lobster</code> y para cargarlo en tu HTML.",
|
||
"Copia la siguiente porción de código y pégala en la parte superior de tu editor de texto:",
|
||
"<code><link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>",
|
||
"Ahora puedes establecer <code>Lobster</code> como valor de font-family de tu elemento <code>h2</code>.",
|
||
"Aplica el tipo de letra (<code>font-family</code>) <code>Lobster</code> a tu elemento <code>h2</code>."
|
||
],
|
||
"titleDe": "Importiere eine Google Font",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08808",
|
||
"descriptionPtBR": [
|
||
"Existem diversas fontes que estão disponíveis por padrão nos navegadores de internet, incluindo <code>Monospace</code>, <code>Serif</code> e <code>Sans-Serif</code>.",
|
||
"No entanto, quando uma fonte não está disponível, podemos dizer ao navegador que \"degrade\" a outro tipo de fonte.",
|
||
"Por exemplo, se você deseja que um elemento use a fonte <code>Helvetica</code>, e que degrade para a fonte <code>Sans-Serif</code> quando a <code>Helvetica</code> não estiver disponível, você pode utilizar o seguinte CSS:",
|
||
"<code>p {</code>",
|
||
"<code> font-family: Helvetica, Sans-Serif;</code>",
|
||
"<code>}</code>",
|
||
"Agora, comente o seu chamado para a fonte do Google, para que a fonte <code>Lobster</code> não esteja disponível. Note como a fonte degrada para <code>Monospace</code>."
|
||
],
|
||
"namePtBR": "Especifique como as Fontes Devem se Degradar",
|
||
"descriptionDe": [
|
||
"Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem <code>Monospace</code>, <code>Serif</code> und <code>Sans-Serif</code>.",
|
||
"Falls eine Font nicht verfügbar ist kannst du dem Browser sagen was er stattdessen verwenden soll.",
|
||
"Wenn du zum Beispiel einem Element die Schriftart <code>Helvetica</code> geben möchtest, aber gleichzeitig als Alertnative die Schrift <code>Sans-Serif</code> laden willst, falls <code>Helvetica</code> nicht verfügbar ist, kannst du diesen CSS Style verwenden:",
|
||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||
"Kommentiere jetzt den Aufruf an Google Fonts aus, sodass <code>Lobster</code> nicht zur Verfügung steht. Beachte, wie nun alternativ die Schriftart <code>Monospace</code> geladen wird."
|
||
],
|
||
"titleRU": "Укажите порядок деградации шрифтов",
|
||
"descriptionRU": [
|
||
"Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них <code>Monospace</code>, <code>Serif</code> и <code>Sans-Serif</code>",
|
||
"Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.",
|
||
"Например, если бы вы хотели, чтобы элемент использовал шрифт <code>Helvetica</code>, но также деградировал до шрифта <code>Sans-Serif</code>, когда <code>Helvetica</code> недоступен, вы могли бы использовать этот CSS-стиль:",
|
||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||
"Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт <code>Lobster</code> становится недоступен. Обратите внимание как происходит деградация до шрифта <code>Monospace</code>."
|
||
],
|
||
"title": "Specify How Fonts Should Degrade",
|
||
"description": [
|
||
"There are several default fonts that are available in all browsers. These include <code>Monospace</code>, <code>Serif</code> and <code>Sans-Serif</code>",
|
||
"When one font isn't available, you can tell the browser to \"degrade\" to another font.",
|
||
"For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
|
||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||
"Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'message: Your h2 element should use the font <code>Lobster</code>.');",
|
||
"assert($(\"h2\").css(\"font-family\").match(/lobster.*,.*monospace/i), 'message: Your h2 element should degrade to the font <code>Monospace</code> when <code>Lobster</code> is not available.');",
|
||
"assert(new RegExp(\"<!--\", \"gi\").test(code), 'message: Comment out your call to Google for the <code>Lobster</code> font by putting <code><!--</code> in front of it.');",
|
||
"assert(new RegExp(\"-->\", \"gi\").test(code), 'message: Be sure to close your comment by adding <code>--></code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Especifica cómo deben degradarse los tipos de letra",
|
||
"descriptionEs": [
|
||
"Hay diversos tipos de letra disponibles por omisión en todos los navegadores. Estos incluyen <code>Monospace</code>, <code>Serif</code> y <code>Sans-Serif</code>",
|
||
"Cuando un tipo de letra no está disponible, puedes decirle al navegador que \"degrade\" a otro tipo de letra.",
|
||
"Por ejemplo, si quieres que un elemento use el tipo <code>Helvetica</code>, o que se degrade a <code>Sans-Serif</code> cuando <code>Helvetica</code> no esté disponible, puedes usar el siguiente estilo CSS:",
|
||
"<blockquote>p {<br> font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
|
||
"Ahora pon en forma de comentario tu llamada a tipos de letra de Google, de forma que el tipo <code>Lobster</code> no esté disponible. Nota cómo se degrada al tipo <code>Monospace</code>."
|
||
],
|
||
"titleDe": "Spezifiziere die Rangfolge von Schriftarten",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08812",
|
||
"descriptionPtBR": [
|
||
"Você pode adicionar imagens à sua página da internet com o uso do elemento <code>img</code>, e apontar para a URL específica de uma imagem utilizando o atributo <code>src</code>.",
|
||
"Um exemplo para isso seria:",
|
||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||
"Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.",
|
||
"Agora, tente fazer isso com essa imagem:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
],
|
||
"namePtBR": "Adicione Imagens em sua Página Web",
|
||
"descriptionDe": [
|
||
"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 in den meisten Fällen <code>img<code> Elemente selbstschließend sind.",
|
||
"Versuche es mit diesem Bild:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
],
|
||
"titleRU": "Добавьте изображения к вашему сайту",
|
||
"descriptionRU": [
|
||
"Вы можете добавлять изображения к вашему сайту с помощью элемента <code>img</code> и указывать ссылки определённых изображений с помощтю атрибута <code>src</code>.",
|
||
"Примером добавления мзображения может служить:",
|
||
"<code><img src=\"https://www.your-image-source.com/your-image.jpg\"></code>",
|
||
"Обратите внимание, что в большинстве случаев элементы <code>img</code> являются самозакрывающимися.",
|
||
"Попробуйте добавить изображение используя следующую ссылку:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
],
|
||
"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.",
|
||
"Try it with this image:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"img\").length > 0, 'message: Your page should have an image element.');",
|
||
"assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Añade imágenes a tu sitio web",
|
||
"descriptionEs": [
|
||
"Puedes agregar imágenes a tu sitio web mediante el uso del elemento <code>img</code>, y apuntar a la URL específica de una imagen utilizando el atributo <code>src</code>.",
|
||
"Un ejemplo de esto sería:",
|
||
"<code><img src=\"https://www.origen-de-tu-imagen.com/tu-imagen.jpg\"></code>",
|
||
"Ten en cuenta que en la mayoría de los casos, los elementos <code>img</code> son de cierre automático.",
|
||
"Prueba con esta imagen:",
|
||
"<code>https://bit.ly/fcc-relaxing-cat</code>"
|
||
],
|
||
"titleDe": "Füge Bilder zu deiner Website hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9acdf08812",
|
||
"descriptionPtBR": [
|
||
"O CSS possui uma propriedade chamada <code>width</code>, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar <code>px</code> (pixels) como medida para especificar a largura de nossa imagem.",
|
||
"Por exemplo, se queremos criar uma classe CSS chamada <code>larger-image</code> que dê aos elementos HTML uma largura de 500px, vamos usar:",
|
||
"<code><estilo></code>",
|
||
"<code> .larger-image{</code>",
|
||
"<code> width: 500px;</code>",
|
||
"<code> }</code>",
|
||
"<code></style></code>",
|
||
"Crie uma classe chamada <code>smaller-image</code> e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
|
||
],
|
||
"namePtBR": "Dê um Tamanho para suas Imagens",
|
||
"descriptionDe": [
|
||
"Die Breite eines Elements wird mit dem CSS Attribut <code>width</code> kontrolliert. Wie bei Schriftarten verwenden wir Pixel <code>px</code> um die Größe zu definieren.",
|
||
"Wenn wir also die CSS Klasse <code>larger-image</code> erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"Erstelle eine Klasse mit dem Namen <code>smaller-image</code> und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
|
||
"<strong>Notiz</strong><br>Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen."
|
||
],
|
||
"titleRU": "Установите размер ваших изображений",
|
||
"descriptionRU": [
|
||
"В CSS есть свойтсво, называемое <code>width</code>, которе управляет шириной элемента. По аналогии со шрифтами, мы используем <code>px</code> (пиксели) для указания ширины изображения.",
|
||
"Например, если бы мы хотели создать CSS-класс <code>larger-image</code>, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображений до 100 пикселей в ширину.",
|
||
"<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
|
||
],
|
||
"title": "Size your Images",
|
||
"description": [
|
||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
|
||
"<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<img src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
|
||
"assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Da tamaño a tus imágenes",
|
||
"descriptionEs": [
|
||
"CSS tiene una propiedad llamada <code>width</code> que controla el ancho de un elemento. Al igual que con las fuentes de letra, usaremos <code>px</code> (píxeles) para especificar el ancho de la imagen. ",
|
||
"Por ejemplo, si queremos crear una clase CSS llamada <code>larger-image</code> que le de a los elementos HTML un ancho de 500 píxeles, usaríamos:",
|
||
"<blockquote><style><br> .larger-image {<br> width: 500px;<br> }<br></style></blockquote>",
|
||
"Crea una clase llamada <code>smaller-image</code> y utilízala para cambiar el tamaño de la imagen de modo que sea de sólo 100 píxeles de ancho.",
|
||
"<strong>Nota</strong><br>Debido a diferencias en los navegadores, es posible que tengas que establecer el zoom en 100% para pasar las pruebas en este desafío."
|
||
],
|
||
"titleDe": "Skaliere deine Bilder",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9bedf08813",
|
||
"descriptionPtBR": [
|
||
"As bordas em CSS possuem propriedades como <code>style</code>, <code>color</code> e <code>width</code>",
|
||
"Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:",
|
||
"<code><style></code>",
|
||
"<code> .thin-red-border {</code>",
|
||
"<code> border-color: red;</code>",
|
||
"<code> border-width: 5px;</code>",
|
||
"<code> border-style: solid;</code>",
|
||
"<code> }</code>",
|
||
"<code></style></code>",
|
||
"Crie uma classe chamada <code>thick-green-border</code> que insira uma borda verde de 10 pixels de largura com um estilo <code>solid</code> ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.",
|
||
"Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo <code>class</code>. Por exemplo:",
|
||
"<code><img class=\"clase1 clase2\"></code>"
|
||
],
|
||
"namePtBR": "Adicione Bordas ao Redor de seus Elementos",
|
||
"descriptionDe": [
|
||
"CSS Rahmen haben Attribute wie <code>style</code>, <code>color</code> und <code>width</code>",
|
||
"Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"Erstelle die Klasse <code>thick-green-border</code>, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style <code>solid</code> um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.",
|
||
"Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im <code>class</code> Attribut trennst. Zum Beispiel:",
|
||
"<code><img class=\"class1 class2\"></code>"
|
||
],
|
||
"titleRU": "Дбавьте границы вокруг ваших элементов",
|
||
"descriptionRU": [
|
||
"CSS-границы имеют свойства: <code>style</code>, <code>color</code> и <code>width</code>",
|
||
"Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"Создайте класс <code>thick-green-border</code>, который добавляет зелёную границу шириной в 10 пикселей со стилем <code>solid</code> вокруг HTML-элемента и примените этот класс к вашему фото кота.",
|
||
"Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута <code>class</code>. Например:",
|
||
"<code><img class=\"class1 class2\"></code>"
|
||
],
|
||
"title": "Add Borders Around your Elements",
|
||
"description": [
|
||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
|
||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
|
||
"Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
|
||
"<code><img class=\"class1 class2\"></code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
|
||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your <code>img</code> element should have the class <code>thick-green-border</code>.');",
|
||
"assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of <code>10px</code>.');",
|
||
"assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of <code>solid</code>.');",
|
||
"assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your <code>img</code> element should be green.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Añade bordes alrededor de tus elementos",
|
||
"descriptionEs": [
|
||
"Los bordes CSS tienen propiedades como <code>style</code>, <code>color</code> y <code>width</code>",
|
||
"Por ejemplo, si queremos crear un borde rojo de 5 píxeles alrededor de un elemento HTML, podríamos utilizar esta clase:",
|
||
"<blockquote><style><br> .thin-red-border {<br> border-color: red;<br> border-width: 5px;<br> border-style: solid;<br> }<br></style></blockquote>",
|
||
"Crea una clase llamada <code>thick-green-border</code> que ponga un borde verde de 10 píxeles de ancho con un estilo <code>solid</code> en torno a un elemento HTML, y aplica esa clase a tu foto del gato. ",
|
||
"Recuerda que puedes aplicar clases múltiples a un elemento separando cada clase con un espacio dentro del atributo <code>class</code>. Por ejemplo:",
|
||
"<code><img class=\"clase1 clase2\"></code>"
|
||
],
|
||
"titleDe": "Füge Rahmen zu deinen Elementen hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08814",
|
||
"descriptionPtBR": [
|
||
"Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado <code>border-radius</code>.",
|
||
"Você pode especificar um <code>border-radius</code> com pixels. Adicione um <code>border-radius</code> de <code>10px</code> para a sua foto.",
|
||
"Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o <code>border-radius</code> tanto para a classe <code>.thick-green-border</code> como para a classe <code>.smaller-image</code>."
|
||
],
|
||
"namePtBR": "Insira Bordas Arredondadas com o Border Radius",
|
||
"descriptionDe": [
|
||
"Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut <code>border-radius</code> abrunden.",
|
||
"Du kannst einen <code>border-radius</code> mit Pixeln deklarieren. Gib deinem Katzenfoto einen <code>border-radius</code> von <code>10px</code>.",
|
||
"Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen <code>border-radius</code> zu der <code>.thick-green-border</code> oder <code>.smaller-image</code> Klasse hinzufügen."
|
||
],
|
||
"titleRU": "Добавьте скруглённые углы с помощью радиуса границы",
|
||
"descriptionRU": [
|
||
"У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство <code>border-radius</code>.",
|
||
"Вы можете указать значения <code>border-radius</code> в пикселях. Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>10px</code>.",
|
||
"Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить <code>border-radius</code> как к классу <code>.thick-green-border</code>, так и к классу <code>.smaller-image</code>."
|
||
],
|
||
"title": "Add Rounded Corners with a Border Radius",
|
||
"description": [
|
||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
|
||
"You can specify a <code>border-radius</code> with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.",
|
||
"Note: this waypoint allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or <code>.smaller-image</code> class."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');",
|
||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of <code>10px</code>');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Agrega esquinas redondeadas usando Border Radius",
|
||
"descriptionEs": [
|
||
"Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>.",
|
||
"Puedes especificar <code>border-radius</code> usando pixeles. Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>.",
|
||
"Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar <code>border-radius</code> ya sea a la clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code>."
|
||
],
|
||
"titleDe": "Füge abgerundete Ecken mit Border Radius hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08815",
|
||
"descriptionPtBR": [
|
||
"Assim como pixels, você também pode usar o <code>border-radius</code> com porcentagens.",
|
||
"Dê para a sua foto de gato um <code>border-radius</code> de <code>50%</code>."
|
||
],
|
||
"namePtBR": "Deixe as Imagens Circulares com o Border Radius",
|
||
"descriptionDe": [
|
||
"Du kannst einem <code>border-radius</code> neben Pixeln auch Prozentwerte zuweisen.",
|
||
"Gib deinem Katzenfoto einen <code>border-radius</code> von <code>50%</code>."
|
||
],
|
||
"titleRU": "Сделайте круглые изображения с помощью радиуса границы",
|
||
"descriptionRU": [
|
||
"В дополнение к пикселям, вы также может использовать проценты для указания значения свойства <code>border-radius</code>.",
|
||
"Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>50%</code>."
|
||
],
|
||
"title": "Make Circular Images with a Border Radius",
|
||
"description": [
|
||
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
|
||
"Give your cat photo a <code>border-radius</code> of <code>50%</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 10px;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of <code>50%</code>, making it perfectly circular.');",
|
||
"assert(code.match(/50%/g), 'message: Be sure to use a percentage instead of a pixel value.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Crea imágenes circulares usando Border Radius",
|
||
"descriptionEs": [
|
||
"Además de pixeles, puedes especificar un <code>border-radius</code> usando porcentajes.",
|
||
"Dale a tu foto del gato un <code>border-radius</code> de <code>50%</code>."
|
||
],
|
||
"titleDe": "Erstelle runde Bilder mit einem Border Radius",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08816",
|
||
"descriptionPtBR": [
|
||
"Os elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são utilizados para ligar conteúdo fora da página atual.",
|
||
"Aqui está um diagrama de um elemento <code>a</code>. Neste caso, o elemento <code>a</code> é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como as tags de âncora se compõem com o texto, como na próxima linha\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Veja um exemplo:",
|
||
"<code><p>Aqui está um <a href=\"https://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p></code>",
|
||
"Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"."
|
||
],
|
||
"namePtBR": "Ligue Páginas Externas com o Elemento Âncora",
|
||
"descriptionDe": [
|
||
"<code>a</code> Elemente, auch bekannt als <code>anchor</code> (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.",
|
||
"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=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"Eine Darstellung wie man Anker Elemente geschrieben werden mit dem gleichen Text wie in der folgenden Zeile\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Hier ist ein Beispiel:",
|
||
"<code><p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p></code>",
|
||
"Erstelle ein <code>a</code> Element, das auf <code>http://freecatphotoapp.com</code> verlinkt und den \"cat photos\" als <code>anchor text</code> (Link-Text) beinhaltet."
|
||
],
|
||
"titleRU": "Присоедините внешние страницы с помощью якорных элементов",
|
||
"descriptionRU": [
|
||
"Элементы <code>a</code>, также известные как <code>якорные</code> элементы, применяют для связи с содержимым вне текущей страницы.",
|
||
"Вот диаграмма элемента <code>a</code>. В этом случае, элемент <code>a</code> использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" 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=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Вот пример:",
|
||
"<code><p>Вот <a href=\"http://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p></code>",
|
||
"Создайте элемент <code>a</code>, который присоединяет <code>http://freecatphotoapp.com</code> и имеет значение \"cat photos\" в качестве <code>текста якоря</code>."
|
||
],
|
||
"title": "Link to External Pages with Anchor Elements",
|
||
"description": [
|
||
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
|
||
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" 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=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Here's an example:",
|
||
"<code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>",
|
||
"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": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"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:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an <code>a</code> element that links to <code>http://freecatphotoapp.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",
|
||
"titleEs": "Enlaza páginas externas con elementos ancla",
|
||
"descriptionEs": [
|
||
"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=\"//i.imgur.com/hviuZwe.png\" 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=\"//i.imgur.com/hviuZwe.png\"></a> ",
|
||
"He aquí un ejemplo:",
|
||
"<code><p>Aquí está un <a href=\"https://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p></code>",
|
||
"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\"."
|
||
],
|
||
"titleDe": "Verlinke externe Seiten mit Anker Elementen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08817",
|
||
"descriptionPtBR": [
|
||
"Outra vez, aqui está um diagrama de um elemento <code>a</code> para você usar como referência.",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como são as tags de âncora com o texto como na linha seguinte\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Veja um exemplo:",
|
||
"<code><p>Este é um <a href=\"https://freecodecamp.com\"> link ligado ao Free Code Camp</a> para que você o siga.</p></code>",
|
||
"<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.",
|
||
"Agora, aninhe o elemento <code>a</code> existente dentro de um novo elemento <code>p</code> de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum."
|
||
],
|
||
"namePtBR": "Aninhe o Elemento Âncora no Interior de um Parágrafo",
|
||
"descriptionDe": [
|
||
"Hier ist nochmal ein Beispiel für ein <code>a</code> Element:",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" 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=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Hier ist ein Beispiel:",
|
||
"<code><p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zu Free Code Camp</a> dem du folgen kannst.</p></code>",
|
||
"<code>Nesting</code> bedeuted ein Element innerhalb eines anderen Elements zu schreiben",
|
||
"Jetzt umschließe dein <code>a</code> Element mit einem neuen <code>p</code> Element (direkt nach dem bereits existierenden <code>h2</code> Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text."
|
||
],
|
||
"titleRU": "Создайте вложенный якорный элемент внутри параграфа",
|
||
"descriptionRU": [
|
||
"Вот диаграмма элемента <code>a</code>:",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" 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=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Вот пример:",
|
||
"<code><p>Вот <a href=\"https://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p></code>",
|
||
"<code>Вложенность</code> значит установку одного элемента внутрь друго элемента.",
|
||
"Теперь вложите ваш существующий элемент <code>a</code> внутрь нового элемента <code>p</code> (сразу после существующего элемента <code>h2</code>) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный."
|
||
],
|
||
"title": "Nest an Anchor Element within a Paragraph",
|
||
"description": [
|
||
"Again, here's a diagram of an <code>a</code> element for your reference:",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" 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=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"Here's an example:",
|
||
"<code><p>Here's a <a href=\"https://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>",
|
||
"<code>Nesting</code> just means putting one element inside of another element.",
|
||
"Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>h2</code> element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<a href=\"http://www.freecatphotoapp.com\">cat photos</a>",
|
||
"",
|
||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0, 'message: You need an <code>a</code> element that links to \"http://www.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.');",
|
||
"assert($(\"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://www.freecatphotoapp.com\\\"]\").parent().text().match(/^\\s*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",
|
||
"titleEs": "Anida un elemento de ancla dentro de un párrafo",
|
||
"descriptionEs": [
|
||
"Una vez más, aquí está un diagrama de un elemento <code>a</code> para tu referencia:",
|
||
"<a href=\"//i.imgur.com/hviuZwe.png\" 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=\"//i.imgur.com/hviuZwe.png\"></a>",
|
||
"He aquí un ejemplo:",
|
||
"<code><p>Aquí hay un <a href=\"https://freecodecamp.com\"> enlace a Free Code Camp</a> para que lo sigas.</p></code>",
|
||
"<code>Anidamiento</code> simplemente significa poner un elemento dentro de otro elemento.",
|
||
"Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> (justo después del elemento <code>h2</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 ."
|
||
],
|
||
"titleDe": "Umschließe ein Anker Element mit einem Paragraphen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08817",
|
||
"descriptionPtBR": [
|
||
"As vezes você pode querer adicionar elementos <code>a</code> em sua página web antes de saber o link que as ligará.",
|
||
"Isso também é útil quando você desejar mudar o comportamento de um link utilizando <code>jQuery</code>, o que vamos aprender mais adiante.",
|
||
"Substitua o atributo <code>href</code> de seu elemento <code>a</code> por um <code>#</code>, também conhecido como símbolo de <em>hash</em> ou hashtag. Isso o transformará em um link inativo."
|
||
],
|
||
"namePtBR": "Crie Links Inativos com o Símbolo Cerquilha",
|
||
"descriptionDe": [
|
||
"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.",
|
||
"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."
|
||
],
|
||
"titleRU": "Создайте мёртвые ссылки используя хэш-символ",
|
||
"descriptionRU": [
|
||
"Иногда вам нужно добавить элементы <code>a</code> к вашему сайту до того, как вы знаете куда будут вести ссылки.",
|
||
"Также это может оказаться полезно, когда вы меняете поведение ссылки используя <code>jQuery</code>, что мы изучим позже.",
|
||
"Замените значение атрибута <code>href</code> вашего элемента <code>a</code> на <code>#</code>, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
|
||
],
|
||
"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>jQuery</code>, which we'll learn about later.",
|
||
"Replace the value of your <code>a</code> element's <code>href</code> attribute with a <code>#</code>, also known as a hash symbol, to turn it into a dead link."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"http://www.freecatphotoapp.com\">cat photos</a>.</p>",
|
||
"",
|
||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"a\").attr(\"href\") === \"#\", 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Haz vínculos muertos utilizando el símbolo de numero",
|
||
"descriptionEs": [
|
||
"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.",
|
||
"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."
|
||
],
|
||
"titleDe": "Erstelle tote Links mit dem Hash Symbol",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08820",
|
||
"descriptionPtBR": [
|
||
"Você pode transformar elementos em links ao aninhá-los com um elemento <code>a</code>.",
|
||
"Aninhe sua imagem dentro de um elemento <code>a</code>. Temos aqui um exemplo.",
|
||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"/></a></code>",
|
||
"Lembre de usar <code>#</code> como atributo <code>href</code> de seu elemento <code>a</code> para tornar o link inativo."
|
||
],
|
||
"namePtBR": "Transforme uma Imagem em um Link",
|
||
"descriptionDe": [
|
||
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
|
||
"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."
|
||
],
|
||
"titleRU": "Превратите изображение в ссылку",
|
||
"descriptionRU": [
|
||
"Вы можете превратить элементы в ссылки путём их вложения внутрь элементов <code>a</code>.",
|
||
"Вложите ваше изображение в элемент <code>a</code>. Вот пример:",
|
||
"<code><a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a></code>",
|
||
"Не забывайте использовать <code>#</code> в качестве значения атрибута <code>href</code> вашего элемента <code>a</code> для превращения ссылки в мёртвую.",
|
||
"Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
|
||
],
|
||
"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\"></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.",
|
||
"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": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"a\").children(\"img.smaller-image\").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",
|
||
"titleEs": "Convierte una imagen en un vínculo",
|
||
"descriptionEs": [
|
||
"Puedes convertir elementos en enlaces al anidarlos dentro de un elemento <code>a</code>.",
|
||
"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 ."
|
||
],
|
||
"titleDe": "Verlinke ein Bild",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08818",
|
||
"descriptionPtBR": [
|
||
"Os atributos <code>alt</code>, também conhecidos como <code>texto alternativo</code>, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos <code>alt</code> também são importantes para que usuários cegos ou com alguma deficiência visual possam entender o que uma imagem retrata. Além disso, os motores de busca também examinam os atributos <code>alt</code>.",
|
||
"Em resumo: Todas as imagem devem ter um atributo <code>alt</code>!",
|
||
"Você pode adicionar um atributo <code>alt</code> já no elemento <code>img</code> assim:",
|
||
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\"></code>",
|
||
"Adicione um atributo <code>alt</code> com o texto <code>A cute orange cat lying on its back</code> para a nossa foto com o gato."
|
||
],
|
||
"namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo",
|
||
"descriptionDe": [
|
||
"<code>alt</code> Attribute – auch <code>alt text</code> genannt – werden von Browsern angezeigt, wenn sie ein Bild nicht laden können. Für blinde oder visuell eingeschränkte Menschen sind sie ebenfalls wichtig um zu verstehen, was ein Bild darstellt. Zudem werden diese Texte von Suchmaschinen genutzt.",
|
||
"Kurz gesagt: Jedes Bild sollte ein <code>alt</code> Attribut beinhalten!",
|
||
"Du kannst das <code>alt</code> Attribut direkt in das Img Element einfügen:",
|
||
"<code><img src=\"www.deine-bild-quelle.com/dein-bild.jpg\" alt=\"dein alt Text\"></code>",
|
||
"Füge zu unserem Katzen-Bild ein <code>alt</code> Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu."
|
||
],
|
||
"titleRU": "Добавьте альтернативный текст к изображению для улучшения доступа",
|
||
"descriptionRU": [
|
||
"Атрибуты <code>alt</code>, также известные как <code>alt text</code>, являются тем, что браузеры отобразят, если изображение загрузить не получится. Атрибуты <code>alt</code> важны для незрячих или пользователей с ограниченными возможностями в области зрения для понимания того, что отображает изображение. Также поисковые системы используют атрибуты <code>alt</code>.",
|
||
"Вкратце, каждое изображение должно иметь атрибут <code>alt</code>!",
|
||
"Вы можете добавить атрибут <code>alt</code> прямо в элемент <conde>img</code> следующим образом:",
|
||
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"ваш альтернативный текст\"></code>",
|
||
"Добавьте атрибут <code>alt</code> с текстом <code>A cute orange cat lying on its back</code> к нашему фото кота."
|
||
],
|
||
"title": "Add Alt Text to an Image for Accessibility",
|
||
"description": [
|
||
"<code>alt</code> attributes, also known as <code>alt text</code>, are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
|
||
"In short, every image should have an <code>alt</code> attribute!",
|
||
"You can add an <code>alt</code> attribute right in the img element like this:",
|
||
"<code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"></code>",
|
||
"Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have an <code>alt</code> attribute set to <code>A cute orange cat lying on its back</code>');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Agrega texto alternativo a una imagen para dar Accesibilidad",
|
||
"descriptionEs": [
|
||
"Los atributos <code>alt</code> también conocidos como <code>texto alternativo</code>, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos <code>alt</code> también son importantes para los usuarios ciegos o con deficiencia visual para entender lo que una imagen retrata. Los motores de búsqueda también examinan los atributos <code>alt</code>. ",
|
||
"En resumen, ¡cada imagen debe tener un atributo <code>alt</code>!",
|
||
"Puedes agregar un atributo <code>alt</code> justo en el elemento <code>img</code> así:",
|
||
"<code><img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\"></code>",
|
||
"Añade un atributo <code>alt</code> con el texto <code>A cute orange cat lying on its back</code> a nuestra foto del gato."
|
||
],
|
||
"titleDe": "Füge Alt Text für mehr Barrierefreiheit hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08827",
|
||
"descriptionPtBR": [
|
||
"O HTML possui um elemento especial para a criação de <code>listas não ordenadas</code>, ou listas com marcadores.",
|
||
"As listas não ordenadas iniciam com um elemento <code><ul></code>. Logo após, possuem uma série de elementos <code><li>.</code>",
|
||
"Por exemplo:",
|
||
"<code><ul></code>",
|
||
" <code><li>leite</li></code>",
|
||
" <code><li>queijo</li></code>",
|
||
"<code></ul></code>",
|
||
"Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".",
|
||
"Apague os dois últimos elementos <code>p</code> e no final da página crie uma lista não ordenada com três coisas que os gatos adoram."
|
||
],
|
||
"namePtBR": "Crie uma Lista Não Ordenada com Marcadores",
|
||
"descriptionDe": [
|
||
"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.",
|
||
"Entferne die letzten zwei <code>p</code> Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite"
|
||
],
|
||
"titleRU": "Создайте ненумерованный неупорядоченный список",
|
||
"descriptionRU": [
|
||
"В HTML есть специальный элемент для создания <code>неупорядоченного списка</code>, или списка с точками в виде меток элементов.",
|
||
"Неупорядоченные списки начинаются с элемента <code><ul></code>. Затем они содержат некоторе количество элементов <code><li></code>.",
|
||
"Например: ",
|
||
"<blockquote><ul><br> <li>milk</li><br> <li>cheese</li><br></ul></blockquote>",
|
||
"создаст ненумерованный список из \"milk\" и \"cheese\".",
|
||
"Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трёх вещей, которые любят кошки."
|
||
],
|
||
"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 a <code><ul></code> element. Then they contain some number of <code><li></code> elements.",
|
||
"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\".",
|
||
"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": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||
"",
|
||
"<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"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",
|
||
"titleEs": "Crea una lista no ordenada con viñetas",
|
||
"descriptionEs": [
|
||
"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\".",
|
||
"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."
|
||
],
|
||
"titleDe": "Erstelle eine ungeordnete Liste",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08828",
|
||
"descriptionPtBR": [
|
||
"O HTML possui um elemento especial para a criação de <code>listas ordenadas</code>, ou listas numeradas.",
|
||
"As listas ordenadas iniciam com um elemento <code><ol></code>. Logo após, contém uma série de elementos <code><li>.</code>",
|
||
"Por exemplo:",
|
||
"<code><ol></code>",
|
||
" <code><li>Garfield</li></code>",
|
||
" <code><li>Sylvester</li></code>",
|
||
"<code></ol></code>",
|
||
"Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".",
|
||
"Crie uma lista ordenada com as três coisas que os gatos mais odeiam."
|
||
],
|
||
"namePtBR": "Crie uma Lista Ordenada",
|
||
"descriptionDe": [
|
||
"HTML beinhaltet ein spezielles Element für <code>ordered lists</code> (geordnete 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.",
|
||
"Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen."
|
||
],
|
||
"titleRU": "Создайте упорядоченный список",
|
||
"descriptionRU": [
|
||
"В HTML есть специальный элемент для создания <code>упорядоченных списков</code>, или списков с номерами в качестве меток элементов.",
|
||
"Упорядоченные списки начинаются с элемента <code><ol></code>. Далее они содержат некоторое количество элементов <code><li></code>.",
|
||
"Например:",
|
||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>",
|
||
"создаст нумерованный список из \"Garfield\" и \"Sylvester\".",
|
||
"Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят."
|
||
],
|
||
"title": "Create an Ordered List",
|
||
"description": [
|
||
"HTML has a special element for creating <code>ordered lists</code>, or numbered-style lists.",
|
||
"Ordered lists start with a <code><ol></code> element. Then they contain some number of <code><li></code> elements.",
|
||
"For example:",
|
||
"<blockquote><ol><br> <li>Garfield</li><br> <li>Sylvester</li><br></ol></blockquote>",
|
||
"would create a numbered list of \"Garfield\" and \"Sylvester\".",
|
||
"Create an ordered list of the top 3 things cats hate the most."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>"
|
||
],
|
||
"tests": [
|
||
"assert.equal($(\"ol\").prev().text(), 'Top 3 things cats hate:', 'message: Your should have an ordered list for \"Top 3 things cats hate\"');",
|
||
"assert.equal($(\"ul\").prev().text(), \"Things cats love:\", 'message: You should have an unordered list for \"Things Cats Love\"');",
|
||
"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",
|
||
"titleEs": "Crear una lista ordenada",
|
||
"descriptionEs": [
|
||
"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\".",
|
||
"Crea una lista ordenada de los 3 cosas que más odian los gatos."
|
||
],
|
||
"titleDe": "Erstelle eine geordnete Liste",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08829",
|
||
"descriptionPtBR": [
|
||
"Agora vamos criar um formulário web.",
|
||
"Os campos de texto são uma forma conveniente de obter uma resposta do usuário.",
|
||
"Você pode criar um assim:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Note que os elementos <code>input</code> são de fechamento automático.",
|
||
"Crie um elemento <code>input</code> de tipo <code>text</code> abaixo de suas listas."
|
||
],
|
||
"namePtBR": "Crie um Campo de Texto",
|
||
"descriptionDe": [
|
||
"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.",
|
||
"Erstelle ein <code>input</code> Element des Typ (\"type\") <code>text</code> unter deinen Listen."
|
||
],
|
||
"titleRU": "Создайте текстовое поле",
|
||
"descriptionRU": [
|
||
"Теперь давайте создадим web-форму.",
|
||
"Поля текстового ввода - удобный способ получения данных от пользователя.",
|
||
"Вы можете создать текстовое поле следующим образом:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Обратите внимание, что элементы <code>input</code> самозакрывающиеся.",
|
||
"Создайте элемент <code>input</code> типа <code>text</code> под вашими списками."
|
||
],
|
||
"title": "Create a Text Field",
|
||
"description": [
|
||
"Now let's create a web form.",
|
||
"Text inputs are a convenient way to get input from your user.",
|
||
"You can create one like this:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Note that <code>input</code> elements are self-closing.",
|
||
"Create an <code>input</code> element of type <code>text</code> below your lists."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"input[type=text]\").length > 0, 'message: Your app should have an <code>input</code> element of type <code>text</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Crea un campo de texto",
|
||
"descriptionEs": [
|
||
"Ahora vamos a crear un formulario web.",
|
||
"Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.",
|
||
"Puedes crear uno como este:",
|
||
"<code><input type=\"text\"></code>",
|
||
"Ten en cuenta que los elementos <code>input</code> son de cierre automático.",
|
||
"Crea un elemento <code>input</code> de tipo <code>text</code> debajo de tus listas."
|
||
],
|
||
"titleDe": "Erstelle ein Textfeld",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08830",
|
||
"descriptionPtBR": [
|
||
"O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.",
|
||
"Você pode criar um texto indicativo assim:",
|
||
"<code><input type=\"text\" placeholder=\"isso é um texto indicativo\"></code>",
|
||
"Estabeleça o valor do <code>texto indicativo</code> do seu campo de texto como \"cat photo URL\"."
|
||
],
|
||
"namePtBR": "Adicione Texto Indicativo a um Campo de Texto",
|
||
"descriptionDe": [
|
||
"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>",
|
||
"Setze bei deinem <code>input</code> Element den Wert für <code>placeholder</code> auf \"cat photo URL\"."
|
||
],
|
||
"titleRU": "Добавьте замещающий текст к текстовому полю",
|
||
"descriptionRU": [
|
||
"Ваш замещающий текст - это то, что отображается в виде текста внутри <code>input</code> пока пользователь не ввёл туда что-либо.",
|
||
"Вы можете создать замещающий текст следующим образом:",
|
||
"<code><input type=\"text\" placeholder=\"это замещающий текст\"></code>",
|
||
"Установите значение атрибута <code>placeholder</code> вашего текстового поля <code>input</code> равными \"cat photo URL\"."
|
||
],
|
||
"title": "Add Placeholder Text to a Text Field",
|
||
"description": [
|
||
"Your placeholder text is what appears in your text <code>input</code> before your user has input anything.",
|
||
"You can create placeholder text like so:",
|
||
"<code><input type=\"text\" placeholder=\"this is placeholder text\"></code>",
|
||
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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\">"
|
||
],
|
||
"tests": [
|
||
"assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute 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.*(text|URL)\\s*[\"\\']\\s*\\/?>/gi), 'message: The finished <code>input</code> element should have valid syntax.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Agrega un texto de relleno a un campo de texto",
|
||
"descriptionEs": [
|
||
"El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.",
|
||
"Puedes crear un texto de relleno de esta manera:",
|
||
"<code><input type=\"text\" placeholder=\"este es un texto de relleno\"></code>",
|
||
"Establece el valor del <code>texto de relleno</code> de tu campo de texto como \"cat photo URL\"."
|
||
],
|
||
"titleDe": "Füge Platzhalter zu einem Textfeld hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08830",
|
||
"descriptionPtBR": [
|
||
"É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento <code>form</code>.",
|
||
"Por exemplo:",
|
||
"<code><form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"></form></code>",
|
||
"Aninhe seu campo de texto em um elemento <code>form</code>. Adicione o atributo <code>action=\"/submit-cat-photo\"</code> para este elemento de formulário."
|
||
],
|
||
"namePtBR": "Crie um Elemento de Formulário",
|
||
"descriptionDe": [
|
||
"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>",
|
||
"Umschließe dein Textfeld mit einem <code>form</code> Element. Füge anschließend das Attribut <code>action=\"/submit-cat-photo\"</code> hinzu."
|
||
],
|
||
"titleRU": "Создайте элемент типа форма",
|
||
"descriptionRU": [
|
||
"Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента <code>form</code>.",
|
||
"Например:",
|
||
"<code><form action=\"/url-куда-вы-хотите-отправить-данные-формы\"></form></code>",
|
||
"Вложите ваше текстовое поле в элемент <code>form</code>. Добавьте атрибут <code>action=\"/submit-cat-photo\"</code> к этому элементу формы."
|
||
],
|
||
"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>",
|
||
"Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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\">"
|
||
],
|
||
"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 a closing tag.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Crea un elemento de formulario",
|
||
"descriptionEs": [
|
||
"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>",
|
||
"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."
|
||
],
|
||
"titleDe": "Erstelle ein Formular",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedd08830",
|
||
"descriptionPtBR": [
|
||
"Vamos inserir um elemento <code>submit</code> ao seu formulário. Ao clicar neste botão, os dados inseridos serão enviados para a URL especificada no atributo <code>action</code> do formulário.",
|
||
"Aqui está um exemplo de um botão de enviar:",
|
||
"<code><button type=\" submit\">este botão enviará o formulário</button></code>",
|
||
"Adicione um botão de enviar ao seu elemento <code>form</code> com o tipo <code>submit</code> e com o texto \"Submit\"."
|
||
],
|
||
"namePtBR": "Inclua um Botão de Enviar a um Formulário",
|
||
"descriptionDe": [
|
||
"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 einen solchen Button:",
|
||
"<code><button type=\"submit\">Dieser Button überträgt die Daten des Formulars.</button></code>",
|
||
"Füge einen Button zum Senden mit dem Typ <code>submit</code> und \"Submit\" als Text zu deinem <code>form</code> Element hinzu."
|
||
],
|
||
"titleRU": "Добавьте кнопку отправки к форме",
|
||
"descriptionRU": [
|
||
"Давайте добавим кнопку отправки <code>submit</code> к вашей форме. Нажатие на эту кнопку отправит данные из вашей формы по адресу, указанному в атрибуте <code>action</code> вашей формы.",
|
||
"Вот пример кнопки отправки:",
|
||
"<code><button type=\"submit\">эта кнопка отправляет данные формы</button></code>",
|
||
"Добавьте кнопку отправки к вашему элементу <code>form</code> с указанием типа <code>submit</code> и \"Submit\" в качестве отображаемого текста."
|
||
],
|
||
"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>",
|
||
"Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>"
|
||
],
|
||
"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",
|
||
"titleEs": "Agrega un botón Enviar a un formulario",
|
||
"descriptionEs": [
|
||
"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>",
|
||
"Agrega un botón de enviar a tu elemento <code>form</code> con el tipo <code>submit</code> y con el texto \"Submit\"."
|
||
],
|
||
"titleDe": "Füge eine Button zum Senden hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedc08830",
|
||
"descriptionPtBR": [
|
||
"Você pode especificar um campo como obrigatório para que seu usuário não consiga enviar o formulário até que o tenha completado.",
|
||
"Por exemplo, se você quiser tornar obrigatório um campo de texto, basta adicionar a palavra <code>required</code> dentro de seu elemento <code>input</code> assim: <code><input type=\"text\" required></code>",
|
||
"Faça com que seu campo de texto seja obrigatório, de forma que o usuário não possa enviar o formulário sem ter completado esse campo.",
|
||
"Após isso, tente enviar o formulário sem digitar nenhum texto no campo. Percebe como seu formulário HTML5 mostra que o campo é obrigatório?"
|
||
],
|
||
"namePtBR": "Use HTML5 para Especificar Campos Obrigatórios",
|
||
"descriptionDe": [
|
||
"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>",
|
||
"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."
|
||
],
|
||
"titleRU": "Используйте HTML5, чтобы сделать заполнение поля обязательным",
|
||
"descriptionRU": [
|
||
"Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
|
||
"Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code><input type=\"text\" required></code>",
|
||
"Сделайте ваше текстовое поле <code>input</code> обязательным <code>required</code> для заполнения, чтобы пользователь не мог отправить данные формы без заполнения этого поля.",
|
||
"Далее попробуйте отправить данные формы без ввода какого-либо текста. Видите как ваша HTML5-форма уведомляет вас о том, что поле обязательное для заполнения?",
|
||
"Внимание: это поле не работает в Safari."
|
||
],
|
||
"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 word <code>required</code> within your <code>input</code> element, you would use: <code><input type=\"text\" required></code>",
|
||
"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 inputing any text. See how your HTML5 form notifies you that the field is required?",
|
||
"Note: This field does not work in Safari."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Utiliza HTML5 para especificar campos obligatorios",
|
||
"descriptionEs": [
|
||
"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> ",
|
||
"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."
|
||
],
|
||
"titleDe": "Nutze HTML5 um ein Pflichtfeld zu erstellen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08834",
|
||
"descriptionPtBR": [
|
||
"É possível utilizar botões de seleção (botões de rádio) para perguntas nas quais o usuário deverá selecionar apenas uma resposta, dentre várias possíveis.",
|
||
"Os botões de seleção são um tipo de elemento <code>input</code>",
|
||
"Cada um dos botões de seleção deve estar contido dentro de seu próprio elemento <code>label</code>.",
|
||
"Todos os botões de seleção relacionados devem ter o mesmo atributo <code>name</code>.",
|
||
"Temos aqui um exemplo de um botão de seleção/rádio:",
|
||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||
"Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção <code>indoor</code> enquanto o outro deve ter a opção <code>outdoor</code>."
|
||
],
|
||
"namePtBR": "Crie um Conjunto de Botões de Seleção",
|
||
"descriptionDe": [
|
||
"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 mit Bezug zueinander sollten das gleiche <code>name</code> Attribut teilen.",
|
||
"Ein Beispiel eines Radiobuttons:",
|
||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||
"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."
|
||
],
|
||
"titleRU": "Создайте набор радио-кнопок",
|
||
"descriptionRU": [
|
||
"Вы можете использовать <code>радио кнопки</code> для вопросов, которые требуют выбора одного варианта ответа из множества.",
|
||
"Радио-кнопки относятся к типу <code>input</code>",
|
||
"Каждая из ваших радио-кнопок должна быть вложена внутрь своего собственного элемента <code>label</code>.",
|
||
"Все относящиеся друг к другу, формирующие группу, радио-кнопки должны иметь один и тот же атрибут <code>name</code>.",
|
||
"Вот пример радио-кнопки:",
|
||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||
"Добавьте пару радио-кнопок к вашей форме. Одна должна соответствовать варианту <code>indoor</code>, а другая - <code>outdoor</code>."
|
||
],
|
||
"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.",
|
||
"Radio buttons are a type of <code>input</code>",
|
||
"Each of your radio buttons should be nested within its own <code>label</code> element.",
|
||
"All related radio buttons should have the same <code>name</code> attribute.",
|
||
"Here's an example of a radio button:",
|
||
"<code><label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label></code>",
|
||
"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>."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>"
|
||
],
|
||
"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>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Crea un Conjunto de botones de radio",
|
||
"descriptionEs": [
|
||
"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>",
|
||
"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>. "
|
||
],
|
||
"titleDe": "Erstelle ein Set von Radiobuttons",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08835",
|
||
"descriptionPtBR": [
|
||
"Os formulários costumam utilizar caixas de seleção para perguntas que podem ter mais de uma resposta.",
|
||
"As caixas de seleção são um tipo de elemento <code>input</code>",
|
||
"Cada uma de suas caixas de seleção deve ser aninhada dentro do próprio elemento <code>label</code>.",
|
||
"Todas as caixas de seleção relacionadas devem ter o mesmo atributo <code>name</code>.",
|
||
"Veja aqui um exemplo de uma caixa de verificação:",
|
||
"<code><label><input type=\"checkbox\" name=\"personality\"> Carinhoso</label></code>",
|
||
"Adicione ao seu formulário um conjunto de três caixas de verificação. Cada uma delas deve estar aninhada dentro de seu próprio elemento <code>label</code>. As três devem compartilhar o atributo <code>name</code>."
|
||
],
|
||
"namePtBR": "Crie um Conjunto de Caixas de Seleção",
|
||
"descriptionDe": [
|
||
"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>",
|
||
"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."
|
||
],
|
||
"titleRU": "Создайте набор флаговых кнопок",
|
||
"descriptionRU": [
|
||
"Обычно формы используют <code>флаги (флаговые кнопки)</code> для вопросов, к которым может относиться несколько вариантов ответов.",
|
||
"Флаги относятся к типу <code>input</code>",
|
||
"Каждый из ваших флагов должен быть вложен в собственный элемент <code>label</code>.",
|
||
"Все относящиеся друг к другу флаги должны иметь одинаковый атрибут <code>name</code>.",
|
||
"Вот пример флаговой кнопки:",
|
||
"<code><label><input type=\"checkbox\" name=\"personality\"> Loving</label></code>",
|
||
"Добавьте набор из трёх флаговых кнопок к вашей форме. Каждый флаг должен быть вложен внутрь собственного элемента <code>label</code>. Все три флага должны иметь одинаковый атрибут <code>name</code>, значение которго равно <code>personality</code>."
|
||
],
|
||
"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><input type=\"checkbox\" name=\"personality\"> Loving</label></code>",
|
||
"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": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
"</form>"
|
||
],
|
||
"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",
|
||
"titleEs": "Crea un conjunto de casillas de verificación",
|
||
"descriptionEs": [
|
||
"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>",
|
||
"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>."
|
||
],
|
||
"titleDe": "Erstelle ein paar Checkboxen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedd08835",
|
||
"descriptionPtBR": [
|
||
"É possível deixar um botão ou caixa de seleção ativado por padrão ao utilizar o atributo <code>checked</code>.",
|
||
"Para isso, basta você acrescentar a palavra \"checked\" no interior de um elemento de entrada. Por exemplo:",
|
||
"<code><input type=\"radio\" name=\"nome-de-teste\" checked></code>",
|
||
"Estabeleça como marcados por padrão o primeiro dos seus <code>botões de seleção/rádio</code> e a primeira <code>caixa de seleção</code>."
|
||
],
|
||
"namePtBR": "Deixe Botões e Caixas de Seleção Ativados por Padrão",
|
||
"descriptionDe": [
|
||
"Du kannst Checkboxen und Radiobuttons standardmäßig markiert machen, indem du das <code>checked</code> Attribut verwendest.",
|
||
"Das kannst du erreichen, indem du das Word \"checked\" innerhalb des Inputelements eingefügst. Zum Beispiel so:",
|
||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||
"Stelle sicher, dass jeweils deine ersten Radiobuttons und Checkboxen standardmäßig markiert sind."
|
||
],
|
||
"titleRU": "Отметьте радио-кнопки и флаговые кнопки по-умолчанию",
|
||
"descriptionRU": [
|
||
"Вы можете установить флаг или радио-кнопку отмеченной по-умолчанию с помощью атрибута <code>checked</code>.",
|
||
"Для этого добавьте слово \"checked\" в качестве атрибута элемента input. Например:",
|
||
"<code><input type=\"radio\" name=\"test-name\" checked></code>",
|
||
"Установите первую <code>радио-кнопку</code> и первый <code>флаг</code> из наборов отмеченными по-умолчанию."
|
||
],
|
||
"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>",
|
||
"Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
|
||
" <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
"</form>"
|
||
],
|
||
"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",
|
||
"titleEs": "Marca botones de radio y casillas de verificación por omisión",
|
||
"descriptionEs": [
|
||
"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>",
|
||
"Establece como marcados por omisión el primero de tus <code>botones de radio</code> y la primera <code>casilla de verificación</code>."
|
||
],
|
||
"titleDe": "Standardmäßig ausgewählte Radiobuttons und Checkboxen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08835",
|
||
"descriptionPtBR": [
|
||
"O elemento <code>div</code>, também conhecido como elemento de divisão, é um contentor de propósito geral para outros elementos.",
|
||
"O elemento <code>div</code> é provavelmente o elemento HTML mais utilizado. Ele é útil para adicionar o CSS de suas próprias declarações de classe para todos os elementos que o contém.",
|
||
"Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag <code>div</code> com <code><div></code> e fechá-la em outra linha com <code></div></code>.",
|
||
"Tente colocar sua tag de abertura <code>div</code> acima do elemento <code>p</code> \"Things cat love\", e sua tag de fechamento de <code>div</code> depois da tag de fechamento do <code>ol</code>, para que cada uma de suas listas esteja dentro de um <code>div</code>.",
|
||
"Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento <code>div</code>."
|
||
],
|
||
"namePtBR": "Aninhe Muitos Elementos Dentro de um só Elemento Div",
|
||
"descriptionDe": [
|
||
"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. Es ist nützlich um die CSS Stile der eigenen Klasse an die enthaltenen Elemente zu vererben.",
|
||
"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.",
|
||
"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 \"Thins cats love\" und \"Things cats hate\" Listen mit einem einzelnen <code>div</code> Element."
|
||
],
|
||
"titleRU": "Вложите множество элементов внутрь одного элемента div",
|
||
"descriptionRU": [
|
||
"Элемент <code>div</code>, известный как элемент раздела, является контейнером общего назначения для других элементов.",
|
||
"Элемент <code>div</code> возможно наиболее широко используемый HTML элемент из всех возможных. Он полезен для передачи собственных CSS-свойств вниз по дереву элементов, которые он содержит.",
|
||
"Как и с любым другим несамозакрывающимся элементом, вы можете открыть элемент <code>div</code> меткой <code><div></code> и закрыть на следующей строке меткой <code></div></code>.",
|
||
"Попробуйте разместить открывающую метку <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>."
|
||
],
|
||
"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. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
|
||
"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>.",
|
||
"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>.",
|
||
"Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></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>",
|
||
" <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>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
"</form>"
|
||
],
|
||
"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",
|
||
"titleEs": "Anida muchos elementos dentro de una sólo elemento Div",
|
||
"descriptionEs": [
|
||
"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. Es útil para pasar el CSS de sus propias declaraciones de clase a todos los elementos que contiene. ",
|
||
"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> .",
|
||
"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>."
|
||
],
|
||
"titleDe": "Umschließe viele Elemente mit einem einzigen Div Element",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fed1348bd9aede07836",
|
||
"title": "Give a Background Color to a Div Element",
|
||
"description": [
|
||
"You can set an element's background color with the <code>background-color</code> property.",
|
||
"For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
|
||
],
|
||
"titleRU": "Присвойте цвет фона элементу div",
|
||
"descriptionRU": [
|
||
"Вы можете установить цвет фона элемента с помощью свойства <code>background-color</code>.",
|
||
"Например, если бы вы хотели установить цвет фона элемента <code>зелёным</code>, вы бы использовали следующий стиль внутри вашего элемента <code>style</code>:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"Создайте класс <code>gray-background</code> со значением свойства <code>background-color</code> равным <code>gray</code>. Назначьте этот класс вашему элементу <code>div</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||
"",
|
||
"<div>",
|
||
" <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>",
|
||
"</div>",
|
||
"",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
||
" <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>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
"</form>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"div\").hasClass(\"gray-background\"), 'message: Give your <code>div</code> element the class <code>gray-background</code>.');",
|
||
"assert($(\".gray-background\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Your <code>div</code> element should have a gray background.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Você pode acrescentar uma cor de fundo de um elemento com a propriedade <code>background-color</code>.",
|
||
"Por exemplo, se você quiser que a cor de fundo de um elemento seja verde (<code>green</code>), dentro de seu elemento <code>style</code> seria assim:",
|
||
"<code>.green-background {</code>",
|
||
"<code> background-color: green;</code>",
|
||
"<code>}</code>",
|
||
"Crie uma classe chamada <code>gray-background</code> com a propriedade <code>background-color</code> em cinza (<code>gray</code>). Depois, adicione essa classe ao seu elemento <code>div</code>."
|
||
],
|
||
"namePtBR": "Dê uma Cor de Fundo a um Elemento Div",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Da un color de fondo a un elemento Div",
|
||
"descriptionEs": [
|
||
"Puedes fijar el color de fondo de un elemento con la propiedad <code>background-color</code>.",
|
||
"Por ejemplo, si quieres que el color de fondo de un elemento sea verde (<code>green</code>), dentro de tu elemento <code>style</code> pondrías:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"Crea una clase llamada <code>gray-background</code> con la propiedad <code>background-color</code> en gris (<code>gray</code>). Asigna esta clase a tu elemento <code>div</code> ."
|
||
],
|
||
"titleDe": "Gib einem Div Element eine Hintergrundfarbe",
|
||
"descriptionDe": [
|
||
"Du kannst die Hintergrundfarbe von einem Element mit dem <code>background-color</code> Attribut setzen",
|
||
"Wenn du zum Beispiel die Hintergrundfarbe von einem Element <code>green</code> machen willst, schreibe dies in dein <code>style</code> Element:",
|
||
"<blockquote>.green-background {<br> background-color: green;<br>}</blockquote>",
|
||
"Erstelle eine Klasse namens <code>gray-background</code> mit der <code>background-color</code> grau (gray). Füge diese Klasse deinem <code>div</code> Element hinzu"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87eee1348bd9aede07836",
|
||
"title": "Set the ID of an Element",
|
||
"description": [
|
||
"In addition to classes, each HTML element can also have an <code>id</code> attribute.",
|
||
"There are several benefits to using <code>id</code> attributes, and you'll learn more about them once you start using jQuery.",
|
||
"<code>id</code> attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same <code>id</code> attribute.",
|
||
"Here's an example of how you give your <code>h2</code> element the id of <code>cat-photo-app</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"Give your <code>form</code> element the id <code>cat-photo-form</code>."
|
||
],
|
||
"titleRU": "Установите id элемента",
|
||
"descriptionRU": [
|
||
"В дополнение к классам, каждый HTML-элемент может также иметь атрибут <code>id</code>.",
|
||
"Есть некоторые преимущества использования атрибутов <code>id</code>, вы узнаете о них больше, когда начнёте использовать jQuery.",
|
||
"Атрибутам <code>id</code> следует быть уникальными. Браузеры не принуждают к этому, но широкой общественностью это признано лучшей практикой. Поэтому, пожалуйста, не присваивайте множеству элементов одинаковое значение атрибута <code>id</code>.",
|
||
"Вот пример того, как вы можете присвоить вашему элементу <code>h2</code> значение атрибута <code>id</code> равное <code>cat-photo-app</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"Присвойте вашему элементу <code>form</code> атрибут <code>id</code> со значением <code>cat-photo-form</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
" .gray-background {",
|
||
" background-color: gray;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||
"",
|
||
"<div class=\"gray-background\">",
|
||
" <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>",
|
||
"</div>",
|
||
"",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
||
" <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>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
"</form>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Além das classes, cada elemento HTML também pode ter um atributo de identificação chamado <code>id</code>.",
|
||
"Existem várias vantagens ao utilizar atributos <code>id</code>, e você aprenderá mais sobre elas quando começar a utilizar jQuery.",
|
||
"Os atributos <code>id</code> devem ser únicos. Os navegadores não o obrigarão a isso, mas isso é amplamente reconhecido como uma boa prática. Assim, não dê um mesmo atributo <code>id</code> a mais de um elemento.",
|
||
"Veja aqui um exemplo de como dar a id <code>cat-photo-app</code> ao seu elemento code>h2</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"Dê ao seu elemento <code>form</code> a id <code>cat-photo-form</code>."
|
||
],
|
||
"namePtBR": "Estabeleça a ID de um Elemento",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Establecer el ID de un elemento",
|
||
"descriptionEs": [
|
||
"Además de las clases, cada elemento HTML también puede tener un atributo de identificación <code>id</code>.",
|
||
"Hay varias ventajas al usar atributos <code>id</code>, y aprenderás más sobre estas cuando comiences a usar jQuery.",
|
||
"Los atributos <code>id</code> deben ser únicos. Los navegadores no obligarán esto, pero es ampliamente reconocido como una de las mejores prácticas. Así que por favor no le des a más de un elemento un mismo atributo <code>id</code>. ",
|
||
"He aquí un ejemplo de cómo le das la identificación <code>cat-photo-app</code> a tu elemento <code>h2</code>:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"Dale a tu elemento <code>form</code> la id <code>cat-photo-form</code>."
|
||
],
|
||
"titleDe": "Setze die ID von einem Element",
|
||
"descriptionDe": [
|
||
"Zusätzlich zu Klassen, kann jedes HTML Element auch ein <code>id</code> Attribut haben.",
|
||
"Es hat mehrere Vorteile <code>id</code> Attribute zu verwenden und du wirst mehr über diese erfahren wenn du anfängst mit jQuery zu arbeiten.",
|
||
"<code>id</code> Attribute sollten eindeutig sein. Browser werden das nicht durchsetzen, aber es ist eine weit verbreitete und erprobte Herangehensweise. Also gib bitte nie mehr als einem Element das gleiche <code>id</code> Attribut.",
|
||
"Hier ist ein Beispiel wie du deinem <code>h2</code> Element die Id <code>cat-photo-app</code> gibst:",
|
||
"<code><h2 id=\"cat-photo-app\"></code>",
|
||
"Gib deinem <code>form</code> Element die Id <code>cat-photo-form</code>."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87dee1348bd9aede07836",
|
||
"title": "Use an ID Attribute to Style an Element",
|
||
"description": [
|
||
"One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
|
||
"Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.",
|
||
"Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
|
||
],
|
||
"titleRU": "Используйте атрибут id для стилизации элемента",
|
||
"descriptionRU": [
|
||
"Одной из замечательных вещей в отношении атрибута <code>id</code> является то, что, как и с классами, вы можете стилизовать их с помощью CSS.",
|
||
"Вот пример того как вы можете присвоить вашему элементу со значением атрибута <code>id</code> равным <code>cat-photo-element</code> зелёный цвет фона. В вашем элементе <code>style</code>:",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Обратите внимание, что внутри вашего элемента <code>style</code> вы ссылаетесь на классы используя <code>.</code> перед их именами. При этом вы всегда ссылаетесь на идентификаторы вставляя <code>#</code> перед их именами.",
|
||
"Попробуйте установить для своей формы, которая теперь имеет атрибут <code>id</code> равный <code>cat-photo-form</code>, зелёный в качестве цвета фона."
|
||
],
|
||
"challengeSeed": [
|
||
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"",
|
||
" .gray-background {",
|
||
" background-color: gray;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href=\"#\">cat photos</a>.</p>",
|
||
"",
|
||
"<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
|
||
"",
|
||
"<div class=\"gray-background\">",
|
||
" <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>",
|
||
"</div>",
|
||
"",
|
||
"<form action=\"/submit-cat-photo\" id=\"cat-photo-form\">",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
|
||
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
|
||
" <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>",
|
||
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
|
||
" <button type=\"submit\">Submit</button>",
|
||
"</form>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'message: Give your <code>form</code> element the id of <code>cat-photo-form</code>.');",
|
||
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'message: Your <code>form</code> element should have the <code>background-color</code> of green.');",
|
||
"assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'message: Make sure your <code>form</code> element has an <code>id</code> attribute.');",
|
||
"assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'message: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Algo interessante sobre os atributos <code>id</code> é que, da mesma forma que com as classes, é possível dar estilos a eles usando CSS.",
|
||
"Aqui está um exemplo de como você pode usar seu elemento com atributo <code>id</code> em <code>cat-photo-element</code> e dar a ele a cor de fundo verde.",
|
||
"<code>#cat-photo-element {</code>",
|
||
"<code> background-color: green;</code>",
|
||
"<code>}</code>",
|
||
"Note que dentro de seu elemento <code>style</code>, você deve sempre referenciar uma classe colocando um <code>.</code> logo antes de seu nome. Já com uma id, você deve referenciar colocando um <code>#</code> antes de seu nome.",
|
||
"Dê ao seu formulário, que agora possui o atributo code>id</code> em <code>cat-photo-form</code>, um fundo verde."
|
||
],
|
||
"namePtBR": "Use um Atributo ID para Estilizar um Elemento",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa un atributo ID para dar estilo a un elemento",
|
||
"descriptionEs": [
|
||
"Una cosa buena sobre los atributos <code>id</code> es que, al igual que con clases, puedes darles estilo usando CSS.",
|
||
"He aquí un ejemplo de cómo puedes tomar tu elemento con atributo <code>id</code> de <code>cat-photo-element</code> y ponerle el color de fondo verde. En tu elemento <code>style</code>: ",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Ten en cuenta que dentro de tu elemento <code>style</code>, siempre referencias clases poniendo un <code>.</code> en frente de sus nombres. Y siempre referencias identificaciones poniendo un <code>#</code> frente a sus nombres. ",
|
||
"Trata de darle a tu formulario, que ahora tiene el atributo <code>id</code> en <code>cat-photo-form</code>, un fondo verde."
|
||
],
|
||
"titleDe": "Benutze ein ID Attribute um ein Element zu stylen",
|
||
"descriptionDe": [
|
||
"Eine coole Eigenschaft von <code>id</code> Attributen ist, dass du sie, genauso wie Klassen, mit CSS stylen kannst.",
|
||
"Hier ist ein Beispiel wie du einem Element mit dem <code>id</code> Attribut <code>cat-photo-element</code> eine grüne Hintergrundfarbe geben kannst. In deinem <code>style</code> Element:",
|
||
"<blockquote>#cat-photo-element {<br> background-color: green;<br>}</blockquote>",
|
||
"Beachte, dass du in deinem <code>style</code> Element Klassen immer mit einem <code>.</code> vor deren Namen ansprichst. Ids sprichst du immer mit <code>#</code> vor deren Namen an.",
|
||
"Versuche deinem Formular, das jetzt das <code>id</code> Attribut <code>cat-photo-form</code> hat, einen grünen Hintergrund zu geben."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad88fee1348bd9aedf08825",
|
||
"descriptionPtBR": [
|
||
"Agora vamos deixar nosso aplicativo de fotos de gatos um pouco de lado, e aprender mais sobre dar estilos em HTML.",
|
||
"Você provavelmente já deve ter notado, mas todos os elementos HTML são, essencialmente, pequenos retângulos.",
|
||
"Três propriedades importantes controlam o espaço ao redor de cada elemento HTML: preenchimento (<code>padding</code>), margem (<code>margin</code>) e borda (<code>border</code>).",
|
||
"O preenchimento (<code>padding</code>) de um elemento controla a quantidade de espaço entre o elemento e sua borda (<code>border</code>).",
|
||
"Aqui, podemos ver que o quadro verde e o quadro vermelho se aninham dentro do quadro amarelo. Leve em conta que o quadro vermelho tem mais preenchimento (<code>padding</code>) que o quadro verde.",
|
||
"Quando você aumenta o preenchimento da caixa verde, a distância entre o texto <code>padding</code> e a borda ao seu redor também será maior.",
|
||
"Mude o preenchimento (<code>padding</code>) da caixa verde para que coincida com a de seu quadrado vermelho."
|
||
],
|
||
"namePtBR": "Ajuste o Preenchimento de um Elemento",
|
||
"descriptionDe": [
|
||
"Lass uns jetzt mal unsere Katzenfoto App kurz beiseite legen um mehr über HTML Styling zu lernen",
|
||
"Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.",
|
||
"Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: <code>padding</code>, <code>margin</code> und <code>border</code>.",
|
||
"<code>padding</code> kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – <code>border</code>",
|
||
"Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>padding</code> hat als die grüne Box.",
|
||
"Ändere das <code>padding</code> der grünen Box um es an die rote Box anzugleichen."
|
||
],
|
||
"titleRU": "Настройка отступа содержимого для элемента",
|
||
"descriptionRU": [
|
||
"Теперь давайте отложим наше фото кота на некоторое время и изучим стилизацию HTML.",
|
||
"Вы могли уже заметить это, но все HTML-элеметы в приницпе являются небольшими прямоугольниками.",
|
||
"Пространство вокруг каждого HTML-элемента контролируют три важных свойства: <code>padding</code>, <code>margin</code>, <code>border</code>.",
|
||
"Свойство элемента <code>padding</code> управляет размером пространства между элементом и его границей <code>border</code>.",
|
||
"Тут мы можем видеть, что зелёный и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ содержимого <code>padding</code>, чем зелёный прямоугольник.",
|
||
"Когда вы увеличиваете <code>padding</code> зелёного прямоугольника, увеличивается расстояние между границей содержимого и границей самого элемента <code>border</code>.",
|
||
"Измените значение свойства <code>padding</code> вашего зелёного прямоугольника, чтобы он был равен соответствующему значению красного прямоугольника."
|
||
],
|
||
"title": "Adjusting the Padding of an Element",
|
||
"description": [
|
||
"Now let's put our Cat Photo App away for a little while and learn more about styling HTML.",
|
||
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
|
||
"Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
|
||
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
|
||
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
|
||
"When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
|
||
"Change the <code>padding</code> of your green box to match that of your red box."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" padding: 20px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" padding: 10px;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Ajusta el relleno de un elemento",
|
||
"descriptionEs": [
|
||
"Ahora vamos a dejar de lado nuestra aplicación de fotos de gatos por un tiempo, y aprenderemos más sobre dar estilo a HTML",
|
||
"Ya habrás notado esto, pero todos los elementos HTML son esencialmente pequeños rectángulos.",
|
||
"Tres propiedades importantes controlan el espacio que rodea a cada elemento HTML: relleno (<code>padding</code>), margen (<code>margin</code>) y borde (<code>border</code>)",
|
||
"El relleno (<code>padding</code>) de un elemento controla la cantidad de espacio entre el elemento y su borde (<code>border</code>).",
|
||
"Aquí, podemos ver que el cuadro verde y el cuadro rojo se anidan dentro del cuadro amarillo. Ten en cuenta que el cuadro rojo tiene más relleno (<code>padding</code>) que el cuadro verde. ",
|
||
"Cuando aumentes el relleno de la caja verde, aumentará la distancia entre el texto <code>padding</code> y el borde alrededor de este.",
|
||
"Cambia el relleno (<code>padding</code>) de la caja verde para que coincida con el de tu cuadro rojo."
|
||
],
|
||
"titleDe": "Justiere den Innenabstand eines Elements",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08822",
|
||
"descriptionPtBR": [
|
||
"A margem (<code>margin</code>) de um elemento controla a quantidade de espaço entre a borda (<code>border</code>) e os elementos ao seu redor.",
|
||
"Aqui, podemos ver que a caixa verde e a caixa vermelha se aninham dentro da caixa amarela. Note que a caixa vermelha possui a margem maior que a caixa verde, fazendo com que ela pareça menor.",
|
||
"Quando você aumenta a margem (<code>margin</code>) da caixa verde, a distância entre a borda e os elementos ao seu redor também aumentará.",
|
||
"Mude a margem (<code>margin</code>) da caixa verde para que coincida com a margem da caixa vermelha."
|
||
],
|
||
"namePtBR": "Ajuste a Margem de um Elemento",
|
||
"descriptionDe": [
|
||
"<code>margin</code> kontrolliert den Abstand zwischen dem Rahmen - <code>border</code> - eines Elements und den benachbarten Elementen.",
|
||
"In diesem Beispiel sehen wir die grüne und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>margin</code> aufweist als die grüne Box, wodurch sie kleiner wirkt.",
|
||
"Wenn du den Außenabstand – <code>margin</code> – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.",
|
||
"Gleiche den Außenabstand – <code>margin</code> der grünen Box dem der roten Box an."
|
||
],
|
||
"titleRU": "Настройка отступа элемента",
|
||
"descriptionRU": [
|
||
"Значение свойства <code>margin</code> контролирует размер отступа между границей <code>border</code> элемента и его окружением.",
|
||
"Тут мы можем видеть, что зелёный прямоугольник и красный прямоугольник вложены в жёлтый прямоугольник. Обратите внимание на то, что красный прямоугольник имеет больший отступ <code>margin</code>, чем зелёный прямоугольник, что делает его визуально меньше.",
|
||
"Когда вы увеличиваете отступ <code>margin</code> зелёного прямоугольника, увеличивается расстояние между его границей и окружающими элементами.",
|
||
"Измените значение отступа <code>margin</code> зелёного прямоугольника так, чтобы оно равнялось соответствующему значению красного прямоугольника."
|
||
],
|
||
"title": "Adjust the Margin of an Element",
|
||
"description": [
|
||
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
|
||
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the green box, making it appear smaller.",
|
||
"When you increase the green box's <code>margin</code>, it will increase the distance between its border and surrounding elements.",
|
||
"Change the <code>margin</code> of the green box to match that of the red box."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" padding: 20px;",
|
||
" margin: 20px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" padding: 20px;",
|
||
" margin: 10px;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Ajusta el margen de un elemento",
|
||
"descriptionEs": [
|
||
"El margen (<code>margin</code>) de un elemento controla la cantidad de espacio entre el borde (<code>border</code>) y los elementos alrededor.",
|
||
"Aquí, podemos ver que la caja verde y la caja roja se anidan dentro de la caja amarilla. Ten en cuenta que la caja roja tiene más margen (<code>margin</code>) que la caja verde, haciendo que parezca más pequeña. ",
|
||
"Cuando aumentes el margen (<code>margin</code>) de la caja verde, aumentará la distancia entre su borde y los elementos que la rodean.",
|
||
"Cambia el margen (<code>margin</code>) de la caja verde para que coincida con el de la caja roja."
|
||
],
|
||
"titleDe": "Passe den Außenabstand eines Elements an",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08823",
|
||
"descriptionPtBR": [
|
||
"A margem de um elemento controla a quantidade de espaço entre a borda do elemento e os elementos ao seu redor.",
|
||
"Se você estabelece a margem de um elemento com um valor negativo, o elemento ficará maior.",
|
||
"Tente estabelecer a margem (<code>margin</code>) a um valor negativo como o da caixa vermelha.",
|
||
"Mude a margem (<code>margin</code>) da caixa verde para <code>-15px</code>, de forma que ocupe toda a largura horizontal da caixa amarela que a rodeia."
|
||
],
|
||
"namePtBR": "Adicione uma Margem Negativa a um Elemento",
|
||
"descriptionDe": [
|
||
"<code>margin</code> kontrolliert den Abstand zwischen dem Rahmen - <code>border</code> - eines Elements und den benachbarten Elementen.",
|
||
"Wenn du dem Außenabstand - <code>margin</code> - eines Elements einen negativen Wert zuweist, wird das Element größer.",
|
||
"Versuche den Außenabstand - <code>margin</code> - auf einen negativen Wert, wie bei der roten Box, zu setzen.",
|
||
"Ändere den Außenabstand – <code>margin</code> – der grünen Box auf <code>-15px</code>, damit sie die gelbe Box horizontal ausfüllt."
|
||
],
|
||
"titleRU": "Добавьте отрицательный отступ к элементу",
|
||
"descriptionRU": [
|
||
"Значение свойства <code>margin</code> контролирует размер отступа между границей <code>border</code> элемента и его окружением.",
|
||
"Если вы установите значение свойства <code>margin</code> элемента отрицательным, то элемент будет становиться больше.",
|
||
"Попробуйте установить значение свойства <code>margin</code> зелёного прямоугольника отрицательным, по аналогии с красным прямоугольником.",
|
||
"Измените значение свойства <code>margin</code> зелёного прямоугольника на <code>-15px</code>, таким образом он занимает всю ширину окружающего жёлтого прямоугольника."
|
||
],
|
||
"title": "Add a Negative Margin to an Element",
|
||
"description": [
|
||
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
|
||
"If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
|
||
"Try to set the <code>margin</code> to a negative value like the one for the red box.",
|
||
"Change the <code>margin</code> of the green box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" padding: 20px;",
|
||
" margin: -15px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" padding: 20px;",
|
||
" margin: 20px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'message: Your <code>green-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Agregar un margen negativo a un elemento",
|
||
"descriptionEs": [
|
||
"El margen de un elemento controla la cantidad de espacio entre el borde del elemento y los elementos que lo rodean.",
|
||
"Si estableces el margen de un elemento en un valor negativo, el elemento se hará más grande.",
|
||
"Trata de establecer el margen (<code>margin</code>) a un valor negativo como el de la caja roja.",
|
||
"Cambia el margen (<code>margin</code>) de la caja verde a <code>-15px</code>, de forma que ocupe todo el ancho horizontal de la caja amarilla que lo rodea."
|
||
],
|
||
"titleDe": "Füge einem Element negativen Außenabstand hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08824",
|
||
"descriptionPtBR": [
|
||
"As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (<code>padding</code>) diferente em cada um de seus lados.",
|
||
"O CSS permite controlar o preenchimento (<code>padding</code>) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code>.",
|
||
"Dê para a caixa verde um preenchimento (<code>padding</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> em suas partes inferior e direita."
|
||
],
|
||
"namePtBR": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
|
||
"descriptionDe": [
|
||
"Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also <code>padding</code> – geben wollen.",
|
||
"CSS erlaubt dir den Innenabstand - <code>padding</code> - eines Elements auf allen Seiten einzeln mit den Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu steuern.",
|
||
"Verleihe der grünen Box einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
|
||
],
|
||
"titleRU": "Добавьте разный отступ содердимого с каждой стороны элемента",
|
||
"descriptionRU": [
|
||
"Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого <code>padding</code> с каждой из сторон был разным.",
|
||
"CSS позволяет вам контролировать значение свойства <code>padding</code> элемента со всех сторон с помощью свойств: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>.",
|
||
"Присвойте зелёному прямоугольнику <code>padding</code> равный <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
],
|
||
"title": "Add Different Padding to Each Side of an Element",
|
||
"description": [
|
||
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
|
||
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
|
||
"Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" padding-top: 40px;",
|
||
" padding-right: 20px;",
|
||
" padding-bottom: 20px;",
|
||
" padding-left: 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');",
|
||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');",
|
||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');",
|
||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Añade relleno diferente a cada lado de un elemento",
|
||
"descriptionEs": [
|
||
"A veces querrás personalizar un elemento para que tenga diferente relleno (<code>padding</code>) en cada uno de sus lados.",
|
||
"CSS te permite controlar el relleno (<code>padding</code>) de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code>. ",
|
||
"Da a la caja verde un relleno (<code>padding</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en sus partes inferior y derecha."
|
||
],
|
||
"titleDe": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1248bd9aedf08824",
|
||
"descriptionPtBR": [
|
||
"Talvez você queira personalizar um elemento para que possua uma margem (<code>margin</code>) diferente em cada um de seus lados.",
|
||
"O CSS permite controlar a margem de um elemento em todos os seus quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> e <code>margin-left</code>.",
|
||
"Dê para a caixa verde uma margem (<code>margin</code>) de <code>40px</code> nas partes superior e esquerda, e de apenas <code>20px</code> nas partes inferior e direita."
|
||
],
|
||
"namePtBR": "Dê Valores Diferentes de Margem a Cada Lado de um Elemento",
|
||
"descriptionDe": [
|
||
"Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - <code>margin</code> - geben wollen.",
|
||
"CSS erlaubt dir ebenfalls den Außenabstand - <code>margin</code> - eines Elements auf jeder Seite einzeln mit den Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu steuern.",
|
||
"Gib der grünen Box einen Außenabstand – <code>margin</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
|
||
],
|
||
"titleRU": "Добавьте разный отступ для элемента",
|
||
"descriptionRU": [
|
||
"Иногда вам может потребоваться изменить элемент, установив разный отступ <code>margin</code> с каждой из его сторон.",
|
||
"CSS позволяет вам контролировать отступ <code>margin</code> элемента с каждой из его сторон с помощью свойств: <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>.",
|
||
"Присвойте красному прямоугольнику значение <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
],
|
||
"title": "Add Different Margins to Each Side of an Element",
|
||
"description": [
|
||
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
|
||
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties.",
|
||
"Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" margin-top: 40px;",
|
||
" margin-right: 20px;",
|
||
" margin-bottom: 20px;",
|
||
" margin-left: 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
|
||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');",
|
||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
|
||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Añade márgenes diferentes a cada lado de un elemento",
|
||
"descriptionEs": [
|
||
"A veces querrás personalizar un elemento para que tenga un margen (<code>margin</code>) diferente en cada uno de sus lados.",
|
||
"CSS te permite controlar el margen de un elemento en los cuatro lados superior, derecho, inferior e izquierdo con las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> y <code>margin-left</code>. ",
|
||
"Da a la caja verde un margen (<code>margin</code>) de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho."
|
||
],
|
||
"titleDe": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08826",
|
||
"descriptionPtBR": [
|
||
"Ao invés de especificar as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code> de um elemento, você pode especificar todas elas em uma só linha, assim:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.",
|
||
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" um preenchimento de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
|
||
],
|
||
"namePtBR": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
|
||
"descriptionDe": [
|
||
"Anstatt die Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu verwenden, kannst du sie alle in einer Zeile schreiben:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.",
|
||
"Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
|
||
],
|
||
"titleRU": "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
|
||
"descriptionRU": [
|
||
"Вместо указания свойств элемента: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>, вы можете указать их в строку, например:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
|
||
"Используйте систему ссылок по часовой стрелке для установки для класса \".green-box\" значения отступа содержимого <code>padding</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
],
|
||
"title": "Use Clockwise Notation to Specify the Padding of an Element",
|
||
"description": [
|
||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this:",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
|
||
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');",
|
||
"assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');",
|
||
"assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');",
|
||
"assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
|
||
"descriptionEs": [
|
||
"En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sóla línea, así: ",
|
||
"<code>padding: 10px 20px 10px 20px;</code>",
|
||
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
|
||
"Usa la notación en sentido horario para dar a la clase \"<code>.green-box</code>\" un relleno de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
|
||
],
|
||
"titleDe": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9afdf08726",
|
||
"descriptionPtBR": [
|
||
"Vamos praticar isso outra vez, mas desta vez será com a margem (<code>margin</code>).",
|
||
"Ao invés de especificar as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, e <code>margin-left</code> de um elemento, você pode especificar todas elas em apenas uma linha assim:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.",
|
||
"Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
|
||
],
|
||
"namePtBR": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
|
||
"descriptionDe": [
|
||
"Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also <code>margin</code>.",
|
||
"Anstatt die Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu verwenden, kannst du alle in eine Zeile schreiben:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.",
|
||
"Nutze die Notation im Uhrzeigersinn – auch <code>Clockwise Notation</code> genannt – um dem Element mit der Klasse <code>green-box</code> <code>40px</code> Außenabstand auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite zu verleihen."
|
||
],
|
||
"titleRU": "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
|
||
"descriptionRU": [
|
||
"Давайте попробуем то же самое, но со свойством <code>margin</code> на этот раз.",
|
||
"Вмето указания свойств элемента: <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>, вы можете указать их в строку, например:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
|
||
"Используйте систему ссылок по часовой стрелке для установки для класса <code>green-box</code> значения отступа <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
|
||
],
|
||
"title": "Use Clockwise Notation to Specify the Margin of an Element",
|
||
"description": [
|
||
"Let's try this again, but with <code>margin</code> this time.",
|
||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this:",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
|
||
"Use <code>Clockwise Notation</code> to give the element with the <code>green-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color: red;",
|
||
" margin: 20px 40px 20px 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"tests": [
|
||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
|
||
"assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
|
||
"assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
|
||
"assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
|
||
],
|
||
"type": "waypoint",
|
||
"titleEs": "Utiliza notación en sentido horario para especificar el margen de un elemento",
|
||
"descriptionEs": [
|
||
"Vamos a intentar esto de nuevo, pero esta vez con el margen (<code>margin</code>).",
|
||
"En lugar de especificar las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, y <code>margin-left</code> de un elemento, puedes especificarlas en una sóla línea así: ",
|
||
"<code>margin: 10px 20px 10px 20px;</code>",
|
||
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
|
||
"Usa <code>notación en sentido horario</code> para dar al elemento con la clase <code>green-box</code> un margen de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
|
||
],
|
||
"titleDe": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
|
||
"challengeType": 0
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08736",
|
||
"title": "Style the HTML Body Element",
|
||
"description": [
|
||
"Now let's start fresh and talk about CSS inheritance.",
|
||
"Every HTML page has a <code>body</code> element.",
|
||
"We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.",
|
||
"We can do this by adding the following to our <code>style</code> element:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
],
|
||
"titleRU": "Стилизуйте HTML-элемент body",
|
||
"descriptionRU": [
|
||
"Теперь давайте начнём с нуля и поговорим о наследовании в CSS.",
|
||
"Каждая HTML-страница имеет элемент <code>body</code>.",
|
||
"Мы можем доказать существование элемента <code>body</code> тут, присвоив его свойству <code>background-color</code> значение <code>black</code>.",
|
||
"Мы можем это сделать добавлением следующего к нашему элементу <code>style</code>:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
"",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of black.');",
|
||
"assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;?\\s*\\}\\s*<\\/style>/i), 'message: Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Agora vamos recomeçar e falar sobre herança em CSS.",
|
||
"Cada página HTML possui um corpo (<code>body</code>).",
|
||
"Podemos demonstrar que o elemento (<code>body</code>) existe aqui, ao dar a ele uma cor de fundo (<code>background-color</code>) preta.",
|
||
"Podemos fazer isso adicionando o seguinte ao nosso elemento <code>style</code>:",
|
||
"<code>body {</code>",
|
||
"<code> background-color: black;</code>",
|
||
"<code>}</code>"
|
||
],
|
||
"namePtBR": "Dê Estilo ao Elemento Body em HTML",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Da estilo en HTML al elemento cuerpo",
|
||
"descriptionEs": [
|
||
"Ahora vamos a empezar de nuevo y hablaremos de herencia CSS.",
|
||
"Cada página HTML tiene un cuerpo (<code>body</code>).",
|
||
"Podemos demostrar que el elemento (<code>body</code>) existe aquí, dandole un color de fondo (<code>background-color</code>) negro.",
|
||
"Podemos hacer esto añadiendo lo siguiente a nuestro elemento <code>style</code>:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
],
|
||
"titleDe": "Style das HTML Body Element",
|
||
"descriptionDe": [
|
||
"Lass uns jetzt frisch beginnen und über CSS Vererbung reden.",
|
||
"Jede HTML Seite hat ein <code>body</code> Element.",
|
||
"Wir können sehen dass es das <code>body</code> Element gibt wenn wir ihm eine schwarze (black) <code>background-color</code> geben",
|
||
"Das bewerkstelligen wir indem wir folgendes unserem <code>style</code> Element hinzufügen:",
|
||
"<blockquote>body {<br> background-color: black;<br>}</blockquote>"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08746",
|
||
"title": "Inherit Styles from the Body Element",
|
||
"description": [
|
||
"Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.",
|
||
"Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
|
||
"First, create a <code>h1</code> element with the text <code>Hello World</code>",
|
||
"Then, let's give all elements on your page the color of <code>green</code> by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
|
||
"Finally, give your <code>body</code> element the font-family of <code>Monospace</code> by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
|
||
],
|
||
"titleRU": "Наследование стилей от элемента Body",
|
||
"descriptionRU": [
|
||
"Мы доказали наличие у каждой HTML-страницы элемента <code>body</code> и то, что этот элемент <code>body</code> можно стилизовать с помощью CSS.",
|
||
"Не забывайте, что вы можете стилизовать ваш элемент <code>body</code> так же как и любой другой HTML-элемент, а все остальные элементы унаследуют стили элемента <code>body</code>.",
|
||
"Для начала, создайте элемент <code>h1</code> с текстом <code>Hello World</code>",
|
||
"Затем присвойте всем элементам на вашей странице <code>зелёный</code> цвет путём добавления <code>color: green;</code> к свойствам, указанным в объявлении стилей для элемента <code>body</code>.",
|
||
"В завершении, присвойте вашему элементу <code>body</code> свойство семейства шрифтов равное <code>Monospace</code> путём добавления <code>font-family: Monospace;</code> к свойствам, указанным в объявлении стилей для элемента <code>body</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" }",
|
||
"",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert(($(\"h1\").length > 0), 'message: Create an <code>h1</code> element.');",
|
||
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'message: Your <code>h1</code> element should have the text <code>Hello World</code>.');",
|
||
"assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'message: Make sure your <code>h1</code> element has a closing tag.');",
|
||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');",
|
||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'message: Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.');",
|
||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'message: Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.');",
|
||
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'message: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Já demonstramos que cada página HTML possui um corpo (<code>body</code>), e que podemos dar estilo a ele através do CSS.",
|
||
"Observe que você pode dar estilo ao seu elemento <code>body</code> como a qualquer outro elemento HTML, e que todos os outros elementos herdarão os estilos de seu elemento <code>body</code>.",
|
||
"Em primeiro lugar, crie um elemento <code>h1</code> com o texto <code>Hello World</code>",
|
||
"Depois, dê a todos os elementos de sua página uma cor verde (<code>green</code>) adicionando <code>color: green;</code> na declaração de estilo de seu elemento <code>body</code>.",
|
||
"Por último, dê ao seu elemento <code>body</code> o tipo de fonte <code>Monospace</code> adicionando <code>font-family: Monospace;</code> na declaração de estilo de seu elemento <code>body</code>."
|
||
],
|
||
"namePtBR": "Herde Estilos do Elemento Body",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Hereda estilos del elemento cuerpo",
|
||
"descriptionEs": [
|
||
"Ya hemos demostrado que cada página HTML tiene un cuerpo (<code>body</code>), y que puede dársele estilo CSS.",
|
||
"Recuerda que puedes dar estilo de tu elemento <code>body</code> como a cualquier otro elemento HTML, y que todos tus otros elementos heredarán sus estilos de tu elemento <code>body</code>.",
|
||
"En primer lugar, crea un elemento <code>h1</code> con el texto <code>Hello World</code>",
|
||
"Después, vamos a darle a todos los elementos de tu página el color verde (<code>green</code>) añadiendo <code>color: green;</code> a la declaración de estilo de tu elemento <code>body</code>.",
|
||
"Por último, da a tu elemento <code>body</code> el tipo de letra <code>Monospace</code> añadiendo <code>font-family: Monospace;</code> a la declaración del estilo de tu elemento <code>body</code>."
|
||
],
|
||
"titleDe": "Erbe Styles vom Body Element",
|
||
"descriptionDe": [
|
||
"Jetzt haben wir bewiesen dass jede HTML Seite ein <code>body</code> Element besitzt und dass dieses <code>body</code> Element ebenfalls mit CSS gestylt werden kann.",
|
||
"Vergiss nicht, dass du dein <code>body</code> Element wie jedes andere HTML Element stylen kannst und dass alle anderen Elemente von deinem <code>body</code> Element Styles erben werden.",
|
||
"Erstelle zuerst ein <code>h1</code> Element mit dem Text <code>Hello World</code>",
|
||
"Dann gib allen Elementen auf deiner Seite die Farbe <code>green</code> indem du <code>color:green;</code> deinen <code>body</code> Element Styles hinzufügst.",
|
||
"Gib deinem <code>body</code> Element abschließend die Schriftart <code>Monospace</code> indem du <code>font-family: Monospace;</code> deinen <code>body</code> Element Styles hinzufügst."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08756",
|
||
"title": "Prioritize One Style Over Another",
|
||
"description": [
|
||
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
|
||
"For example, your <code>h1</code> element can't be both green and pink at the same time.",
|
||
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS property?",
|
||
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
|
||
"Give your <code>h1</code> element the class of <code>pink-text</code>."
|
||
],
|
||
"titleRU": "Установите приоритет одного стиля над другим",
|
||
"descriptionRU": [
|
||
"Иногда вашим HTML-элементам будут присвоены множественные стили, конфликтующие друг с другом.",
|
||
"Например, ваш элемент <code>h1</code> не может быть одновременно зелёным и розовым.",
|
||
"Давайте посмотрим, что произойдёт, когда мы создадим класс, который делает текст розовым, затем присвоим его элементу. <code>Переопределит</code> ли наш класс значение CSS-свойства элемента <code>body</code> равное <code>color: green;</code>?",
|
||
"Создайте CSS-класс <code>pink-text</code>, который назначает элементу розовый в качестве цвета.",
|
||
"Назначьте вашему элементу <code>h1</code> класс <code>pink-text</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: Monospace;",
|
||
" color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h1>Hello World!</h1>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
|
||
"assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*pink\\s*;\\s*\\}/g), 'message: Your <code><style></code> should have a <code>pink-text</code> CSS class with its color set to pink.');",
|
||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"As vezes os elementos HTML recebem múltiplos estilos que entram em conflito entre si.",
|
||
"Por exemplo, o elemento <code>h1</code> não pode ser verde e rosa ao mesmo tempo.",
|
||
"Vamos ver o que acontece quando criamos uma classe que faz com que o texto seja rosa e então o aplicamos a um elemento. Isso irá sobrepor (<code>override</code>) a propriedade CSS <code>color: green</code> do elemento <code>body</code> de nossa classe?",
|
||
"Crie uma classe CSS chamada <code>pink-text</code>, que dê a cor rosa a um elemento.",
|
||
"Depois, adicione a classe <code>pink-text</code> ao seu elemento <code>h1</code>."
|
||
],
|
||
"namePtBR": "Priorize um Estilo Sobre o Outro",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Priorizar un estilo sobre otro",
|
||
"descriptionEs": [
|
||
"A veces los elementos HTML recibirán múltiples estilos que entran en conflicto entre sí.",
|
||
"Por ejemplo, el elemento <code>h1</code> no puede ser verde y rosa al mismo tiempo.",
|
||
"Vamos a ver lo que sucede cuando creamos una clase que hace rosado el texto y luego lo aplicamos a un elemento. ¿Anulará (<code>override</code>) nuestra clase la propiedad CSS <code>color: green</code> del elemento <code>body</code>?",
|
||
"Crea una clase CSS llamada <code>pink-text</code> que le da a un elemento el color rosado.",
|
||
"Ponle a tu elemento <code>h1</code> la clase de <code>pink-text</code>."
|
||
],
|
||
"titleDe": "Ziehe einen Style einem Anderen vor",
|
||
"descriptionDe": [
|
||
"Manchmal werden deine HTML Elemente mehrere Styles erhalten die sich gegenseitig widersprechen.",
|
||
"Zum Beispiel könnte dein <code>h1</code> Element nicht gleichzeitig grün und pink sein.",
|
||
"Schauen wir uns an was passiert wenn wir eine Klasse erstellen die Text pink macht und dann einem Element hinzufügen. Wird unsere Klasse die <code>color:green;</code> Eigenschaft unseres <code>body</code> Elements überschreiben - <code>override</code> - ?"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf04756",
|
||
"title": "Override Styles in Subsequent CSS",
|
||
"description": [
|
||
"Our \"pink-text\" class overrode our <code>body</code> element's CSS declaration!",
|
||
"We just proved that our classes will override the <code>body</code> element's CSS. So the next logical question is, what can we do to override our <code>pink-text</code> class?",
|
||
"Create an additional CSS class called <code>blue-text</code> that gives an element the color blue. Make sure it's below your <code>pink-text</code> class declaration.",
|
||
"Apply the <code>blue-text</code> class to your <code>h1</code> element in addition to your <code>pink-text</code> class, and let's see which one wins.",
|
||
"Applying multiple class attributes to a HTML element is done with a space between them like this:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Note: It doesn't matter which order the classes are listed in the HTML element.",
|
||
"However, the order of the <code>class</code> declarations in the <code><style></code> section are what is important. The second declaration will always take precedence over the first. Because <code>.blue-text</code> is declared second, it overrides the attributes of <code>.pink-text</code>"
|
||
],
|
||
"titleRU": "Преопределите стили последующим CSS",
|
||
"descriptionRU": [
|
||
"Наш класс \"pink-text\" переопределил объявленное CSS-свойство элемента <code>body</code>!",
|
||
"Мы только что доказали, что наши классы переопределяют CSS-свойства, обявленные в элементе <code>body</code>. Следующим вопросом по логике дожно быть: можем ли мы переопределить наш класс <code>pink-text</code> class?",
|
||
"Создайте дополнительный CSS-класс <code>blue-text</code>, который присваивает элементу синий цвет. Убедитесь, что он расположен ниже объявления вашего класса <code>pink-text</code>.",
|
||
"Примените класс <code>blue-text</code> к вашему элементу <code>h1</code> в дополнение к вашему классу <code>pink-text</code>, и давайте посмотрим какой выиграет.",
|
||
"Применение множественных классов к атрибуту <code>class</code> HTML-элемента осуществляется через пробел:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Внимание: порядок, в котором указаны классы HTML-элемента неважен.",
|
||
"Однако, порядок, в котором <code>классы</code> указаны в элементе <code><style></code> важен. Последующее объявление будет всегда иметь приоритет над предшествующим. Поскольку <code>.blue-text</code> объявлен последним, он переопрпделяет значения заданные атрибутом <code>.pink-text</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: Monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 class=\"pink-text\">Hello World!</h1>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
|
||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
|
||
"assert($(\".pink-text\").hasClass(\"blue-text\"), 'message: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');",
|
||
"assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'message: Your <code>h1</code> element should be blue.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Nossa classe \"pink-text\" anulou a declaração CSS de nosso elemento <code>body</code>!",
|
||
"Acabamos de demonstrar que nossas classes irão sobrepor o CSS do elemento <code>body</code>. Sendo assim, nossa seguinte pergunta lógica é: O que podemos fazer para sobrepor a nossa classe <code>pink-text</code>?",
|
||
"Crie uma classe tradicional com CSS chamada <code>texto-azul</code>, que possa dar a um elemento a cor azul. Tenha a certeza de deixá-la abaixo de sua declaração da classe <code>pink-text</code>.",
|
||
"Aplique a classe <code>blue-text</code> ao seu elemento <code>h1</code>, além da classe <code>pink-text</code>, e vamos ver qual delas ganhará.",
|
||
"Lembre que a adição de vários atributos de classe a um elemento HTML se faz utilizando espaços entre ambos, assim:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Nota: A ordem em que as classes são listadas em HTML não tem importância.",
|
||
"Contudo, a ordem de declarações de <code>classe</code> no <code><style></code> é importante. A segunda declaração sempre terá precedência pela primeira. Já que <code>.blue-text</code> é declarado depois, ele irá sobrepor os atributos de <code>.pink-text</code>."
|
||
],
|
||
"namePtBR": "Sobreponha Estilos com CSS Posterior",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Anula estilos con CSS posterior",
|
||
"descriptionEs": [
|
||
"¡Nuestra clase \"pink-text\" anuló la declaración CSS de nuestro elemento <code>body</code>!",
|
||
"Acabamos de demostrar que nuestras clases anularán el CSS del elemento <code>body</code>. Así que la siguiente pregunta lógica es: ¿qué podemos hacer para anular nuestra clase <code>pink-text</code>?",
|
||
"Crea una clase CSS adicional llamada <code>texto-azul</code> que le de a un elemento el color azul. Asegúrate de que está debajo de tu declaración de la clase <code>pink-text</code>. ",
|
||
"Aplica la clase <code>blue-text</code> a tu elemento <code>h1</code> además de tu clase <code>pink-text</code> y veamos cuál gana.",
|
||
"La aplicación de múltiples atributos de clase a un elemento HTML se hace usando espacios entre ellos así:",
|
||
"<code>class=\"clase1 clase2\"</code>",
|
||
"Nota: No importa el orden en que las clases aparecen en el HTML.",
|
||
"Sin embargo, el orden de las declaraciones <code>class</code> en la sección <code><style></code> sí son importantes. La segunda declaración siempre precederá a la primera. Debido a que <code>.blue-text</code> es declarada después, esta anula los atributos de <code>.pink-text</code>"
|
||
],
|
||
"titleDe": "Überschreibe Styles mit nachträglichen CSS",
|
||
"descriptionDe": [
|
||
"Unsere \"pink-text\" Klasse hat unsere CSS Angaben des <code>body</body> Elements überschrieben!",
|
||
"Wir haben gerade bewiesen, dass unsere Klassen das CSS des <code>body</body> Elements überschreiben. Die logische nächste Frage ist also was wir tun können um unsere <code>pink-text</code> Klasse zu überschreiben?",
|
||
"Erstelle eine weitere CSS Klasse namens <code>blue-text</code>, die deinem Element eine blaue Farbe gibt. Stelle sicher dass sie unter deiner <code>pink-text</code> Klassen-Deklaration steht.",
|
||
"Füge die <code>blue-text</code> Klasse deinem <code>h1</code> Element zusätzlich zur <code>pink-text</code> Klasse hinzu und schau welche gewinnt.",
|
||
"Einem HTML Element mehrere Klassen Attribute zu geben funktioniert mit einem Leerzeichen dazwischen:",
|
||
"<code>class=\"class1 class2\"</code>",
|
||
"Notiz: Es ist egal in welcher Reihenfolge die Klassen in einem HTML Element angeordnet sind.",
|
||
"Allerdings ist die Reihenfolge der <code>class</code> Deklarationen im <code><style></code> Abschnitt durchaus wichtig. Die zweite Deklaration wird immer Vorzug gegenüber der Ersten erhalten. Weil <code>.blue-text</code> als zweites deklariert wird, überschreibt es die Attribute von <code>.pink-text</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd8aedf06756",
|
||
"title": "Override Class Declarations by Styling ID Attributes",
|
||
"description": [
|
||
"We just proved that browsers read CSS from top to bottom. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last.",
|
||
"But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?",
|
||
"Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.",
|
||
"Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this:",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
|
||
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Note: It doesn't matter whether you declare this css above or below pink-text class, since id attribute will always take precedence."
|
||
],
|
||
"titleRU": "Переопределите значения свойств классов стилизацией атрибутов id",
|
||
"descriptionRU": [
|
||
"Мы только что доказали, что браузеры читают CSS сверху-вниз. Это значит, что в случае конфликта значений будет установлено то, которое было объявлено в последнюю очередь.",
|
||
"Но мы ещё не закончилил. Есть и другие способы переопределения CSS. Помните атрибуты id?",
|
||
"Давайте переопределим ваши классы <code>pink-text</code> и <code>blue-text</code>, и сделаем ваш элемент <code>h1</code> оранжевым, назначив элементу <code>h1</code> зна<D0BD><D0B0>ение атрибута <code>id</code> и его последующей стилизацией.",
|
||
"Назначьте вашему элементу <code>h1</code> значение атрибута <code>id</code> равное <code>orange-text</code>. Помните, что стилизация атрибута <code>id</code> выглядит так:",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Оставьте классы <code>blue-text</code> и <code>pink-text</code> присвоенными вашему элементу <code>h1</code>.",
|
||
"Объявите свойства вашего атрибута <code>id</code> с названием <code>orange-text</code> в вашем элементе <code>style</code>. Вот пример того, как это выглядит:",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Внимание: Не имеет значения объявите ли вы стиль выше или ниже класса <code>pink-text</code>, так как атрибут <code>id</code> всегда имеет приоритет."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: Monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
" .blue-text {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 class=\"pink-text blue-text\">Hello World!</h1>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
|
||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
|
||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Give your <code>h1</code> element the id of <code>orange-text</code>.');",
|
||
"assert(code.match(/#orange-text\\s*{/gi), 'message: Create a CSS declaration for your <code>orange-text</code> id');",
|
||
"assert(!code.match(/<h1.*style.*>/gi), 'message: Do not give your <code>h1</code> any <code>style</code> attributes.');",
|
||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'message: Your <code>h1</code> element should be orange.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Acabamos de demonstrar que os navegadores fazem a leitura do CSS de cima para baixo. Isso significa que, em caso de um conflito, o navegador utilizará a última declaração CSS.",
|
||
"Mas ainda não terminamos, pois existem outras formas para sobrepor CSS. Você se lembra dos atributos <code>id</code>?",
|
||
"Vamos sobrepor suas classes <code>pink-text</code> e <code>blue-text</code>, e fazer com que seu elemento <code>h1</code> seja laranja. Faremos isso aplicando uma <code>id</code> para o elemento <code>h1</code> e então estilizando essa <code>id</code>.",
|
||
"Dê ao seu elemento <code>h1</code> o atributo <code>id</code> de nome <code>orange-text</code>. Relembre que os atributos id são assim:",
|
||
"<code>#brown-text {</code>",
|
||
"<code> color: brown;</code>",
|
||
"<code>}</code>",
|
||
"Nota: Não importa se você declara este CSS acima ou abaixo da classe de texto cor de rosa, já que atributos id sempre terão prioridade."
|
||
],
|
||
"namePtBR": "Sobreponha a Declaração de Classes Estilizando Atributos ID",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Anula la declaración de clases dando estilo a los atributos ID",
|
||
"descriptionEs": [
|
||
"Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ",
|
||
"Pero no hemos terminado todavía. Hay otras maneras con las que puedes anular CSS. ¿Te acuerdas de los atributos id?",
|
||
"Anulemos tus clases <code>pink-text</code> y <code>blue-text</code>, y pongamos anaranjado tu elemento <code>h1</code>, dándole una identificación al elemento <code>h1</code> y poniéndole estilo a esa identificación (<code>id</code>).",
|
||
"Dale a tu elemento <code>h1</code> el atributo <code>id</code> con valor <code>orange-text</code>. Recuerda, los atributos id se ven así: ",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Deja las clases <code>blue-text</code> y <code>pink-text</code> de tu elemento <code>h1</code>.",
|
||
"Crea una declaración CSS para tu identificación <code>orange-text</code> en tu elemento <code>style</code>. He aquí un ejemplo de como se ve esto: ",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Nota: No importa si usted declara este css encima o debajo de la clase de texto de color rosa, ya atributo id siempre tendrá prioridad."
|
||
],
|
||
"titleDe": "Überschreibe Klassen Deklarationen mit Styling von ID Attributen",
|
||
"descriptionDe": [
|
||
"Wir haben gerade bewiesen, dass der Browser CSS von oben nach unten liest. Das bedeuted, dass im Falle eines Konflikts der Browser immer die letzte CSS Deklaration verwenden wird.",
|
||
"Aber damit sind wir noch nicht fertig. Es gibt andere Wege um CSS zu überschreiben. Erinnerst du dich an Id Attribute?",
|
||
"Überschreiben wir jetzt unsere <code>pink-text</code> und <code>blue-text</code> Klasse und machen unser <code>h1</code> Element orange, indem wir dem <code>h1</code> Element eine Id geben und diese dann stylen.",
|
||
"Gib deinem <code>h1</code> Element das <code>id</code> Attribute <code>orange-text</code>. Vergiss nicht, Id Styles sehen so aus:",
|
||
"<code><h1 id=\"orange-text\"></code>",
|
||
"Erstelle eine CSS Deklaration für deine <code>orange-text</code> Id in deinem <code>style</code> Element. Hier siehst du ein Beispiel wie sowas aussieht:",
|
||
"<blockquote>#brown-text {<br> color: brown;<br>}</blockquote>",
|
||
"Notiz: Es ist egal ob du dies vor oder nach deiner \"pink-text\" Klasse schreibst, da Id Attribute immer bevorzugt werden."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf06756",
|
||
"title": "Override Class Declarations with Inline Styles",
|
||
"description": [
|
||
"So we've proven that id declarations override class declarations, regardless of where they are declared in your <code>style</code> element CSS.",
|
||
"There are other ways that you can override CSS. Do you remember inline styles?",
|
||
"Use an <code>in-line style</code> to try to make our <code>h1</code> element white. Remember, in line styles look like this:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element."
|
||
],
|
||
"titleRU": "Переопределите значения свойств классов встроенными стилями",
|
||
"descriptionRU": [
|
||
"Итак, мы доказали, что объявление атрибута <code>id</code> переопределяет значения свойств, определённые в значениях атрибута <code>class</code>, независимо от того, были ли они объявлены в вашем элементе <code>style</code>.",
|
||
"Есть и другие способы переопределения CSS. Помните встроенные стили?",
|
||
"Используйте <code>встроенный стиль</code>, чтобы попробовать сделать наш элемент <code>h1</code> белым. Помните, что встроенные стили выглядят следующим образом:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Оставьте классы <code>blue-text</code> и <code>pink-text</code> назначенными вашему элементу <code>h1</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: Monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" #orange-text {",
|
||
" color: orange;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
" .blue-text {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 id=\"orange-text\" class=\"pink-text blue-text\">Hello World!</h1>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
|
||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
|
||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.');",
|
||
"assert(code.match(/<h1[\\s\\S]*?style/gi) && code.match(/<h1[\\s\\S]*?style[\\s\\S]*?color\\s*?:/gi), 'message: Give your <code>h1</code> element the inline style of <code>color: white</code>.');",
|
||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'message: Your <code>h1</code> element should be white.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Certo, nós demonstramos que declarações de id sobrepoem as declarações de classe, independente do lugar onde são declarados em seu elemento <code>style</code> no CSS.",
|
||
"Existem outras formas em que você pode sobrepor CSS. Você se lembra de estilos inline?",
|
||
"Use um estilo <code>inline</code> para tentar fazer com que nosso elemento <code>h1</code> tenha a cor branca. Relembre que estilos inline são assim:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Deixe as classes <code>blue-text</code> e <code>pink-text</code> em seu elemento <code>h1</code>."
|
||
],
|
||
"namePtBR": "Sobreponha a Declaração de Classes com Estilos Inline",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Anula declaraciones de clase con estilos en línea",
|
||
"descriptionEs": [
|
||
"Así que hemos demostrado que las declaraciones de identificadores anulan las declaraciones de clase, independientemente del lugar donde se declaran en tu elemento de estilo CSS <code>style</code>.",
|
||
"Hay otras maneras en las que puedes anular CSS. ¿Te acuerdas de los estilos en línea?",
|
||
"Utiliza un <code>estilo en línea</code> para tratar de hacer blanco nuestro elemento <code>h1</code>. Recuerda, los estilos en línea se ven así: ",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Deja las clases <code>blue-text</code> y <code>pink-text</code> en tu elemento <code>h1</code>."
|
||
],
|
||
"titleDe": "Überschreibe deine Klassen Deklarationen mit Inline Styles",
|
||
"descriptionDe": [
|
||
"Wir haben also gesehen dass Id Deklarationen die von Klassen überschreiben, egal wo sie in deinem <code>style</code> Element CSS stehen.",
|
||
"Es gibt noch andere Wege CSS zu überschreiben. Erinnerst du dich an Inline Styles?",
|
||
"Benutze <code>in-line style</code> um dein <code>h1</code> Element weiß zu machen. Vergiss nicht, Inline Styles sehen so aus:",
|
||
"<code><h1 style=\"color: green\"></code>",
|
||
"Lasse die <code>blue-text</code> und <code>pink-text</code> Klassen auf deinem <code>h1</code> Element."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf07756",
|
||
"title": "Override All Other Styles by using Important",
|
||
"description": [
|
||
"Yay! We just proved that in-line styles will override all the CSS declarations in your <code>style</code> element.",
|
||
"But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.",
|
||
"In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use <code>!important</code>",
|
||
"Let's go all the way back to our <code>pink-text</code> class declaration. Remember that our <code>pink-text</code> class was overridden by subsequent class declarations, id declarations, and in-line styles.",
|
||
"Let's add the keyword <code>!important</code> to your pink-text element's color declaration to make 100% sure that your <code>h1</code> element will be pink.",
|
||
"An example of how to do this is:",
|
||
"<code>color: red !important;</code>"
|
||
],
|
||
"titleRU": "Переопределите все другие стили применив important",
|
||
"descriptionRU": [
|
||
"Ура! Мы только что доказали, что встроенные стили переопределяют все другие объявления CSS-свойств в вашем элементе <code>style</code>.",
|
||
"Но подождите. Есть ещё один последний способ переопределения CSS. Это наиболее существенный способ из всех. Но перед тем, как мы его попробует, давайте поговорим о том, зачем вам может понадобиться переопрелить CSS.",
|
||
"Во множестве ситуаций вы будете использовать CSS-библиотеки. Это может переопределить ваш собственный CSS. Таким образом, когда вам требуется быть абсолютно уверенными в том, что элемент будет обладать определёнными CSS-свойствами, вы можете использовать <code>!important</code>",
|
||
"Давайте вернёмся к объявлению нашего класса <code>pink-text</code>. Помните, что наш класс <code>pink-text</code> был переопределён последующим классом, стилизацией атрибута <code>id</code>, встроенным стилем.",
|
||
"Давайте добавим ключевое слово <code>!important</code> к вашему объявлению текста розовым, чтобы убедиться на 100%, что ваш элемент <code>h1</code> будет розовый.",
|
||
"Пример того, как это можено сделать:",
|
||
"<code>color: red !important;</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" font-family: Monospace;",
|
||
" color: green;",
|
||
" }",
|
||
" #orange-text {",
|
||
" color: orange;",
|
||
" }",
|
||
" .pink-text {",
|
||
" color: pink;",
|
||
" }",
|
||
" .blue-text {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"<h1 id=\"orange-text\" class=\"pink-text blue-text\" style=\"color: white\">Hello World!</h1>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"h1\").hasClass(\"pink-text\"), 'message: Your <code>h1</code> element should have the class <code>pink-text</code>.');",
|
||
"assert($(\"h1\").hasClass(\"blue-text\"), 'message: Your <code>h1</code> element should have the class <code>blue-text</code>.');",
|
||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'message: Your <code>h1</code> element should have the id of <code>orange-text</code>.');",
|
||
"assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'message: Your <code>h1</code> element should have the inline style of <code>color: white</code>.');",
|
||
"assert(code.match(/\\.pink-text\\s+\\{\\s+color:.*pink.*!important;\\s+\\}/gi), 'message: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');",
|
||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'message: Your <code>h1</code> element should be pink.');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Isso! Demonstramos que os estilos inline irão sobrepor todas as declarações CSS de seu elemento <code>style</code>.",
|
||
"Mas, espere! Há uma última forma de sobrepor com CSS. Este é o método mais poderoso de todos. Contudo, antes de colocá-lo em prática, vamos falar sobre os motivos que podem fazer você querer sobrepor CSS.",
|
||
"Em diversas situações, você usará bibliotecas CSS. Pode ser que essas bibliotecas sobreponham acidentalmente o seu próprio CSS. Por isso, quando você precisar estar seguro de que um elemento possui um CSS específico, você poderá utilizar <code>!important</code>.",
|
||
"Certo, vamos voltar para a nossa declaração de classe <code>pink-text</code>. Relembre que nossa classe <code>pink-text</code> foi sobreposta pelas declarações de classe posteriores, por declarações id e por estilos inline.",
|
||
"Vamos adicionar nossa palavra-clave <code>!important</code> para sua declaração de cor de <code>pink-text</code> para que possamos estar 100% seguros que seu elemento <code>h1</code> será sempre cor de rosa.",
|
||
"Um exemplo para fazer isso é:",
|
||
"<code>color: red !important;</code>"
|
||
],
|
||
"namePtBR": "Sobreponha Todos os Outros Elementos Utilizando Important",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Anula todos los demás estilos utilizando Important",
|
||
"descriptionEs": [
|
||
"¡Hurra! Demostramos que los estilos en línea anularán todas las declaraciones CSS de tu elemento <code>style</code>. ",
|
||
"¡Pero espera! Hay una última forma de anular CSS. Este es el método más poderoso de todos. Pero antes de hacerlo, vamos a hablar de por qué puedes querer anular CSS. ",
|
||
"En muchas situaciones, usarás bibliotecas CSS. Estas pueden anular accidentalmente tu propio CSS. Por eso, cuando necesitas estar seguro de que un elemento tiene un CSS específico puedes usar <code>!important</code>",
|
||
"Regresemos a nuestra declaración de clase <code>pink-text</code>. Recuerda que nuestra clase <code>pink-text</code> fue anulada por declaraciones de clases posteriores, declaraciones id, y estilos en línea. ",
|
||
"Vamos a añadir la palabra clave <code>!important</code> a tu declaración del color de <code>pink-text</code> para estar 100% seguros que tu elemento <code>h1</code> será rosado.",
|
||
"Un ejemplo de cómo hacer esto es:",
|
||
"<code>color: red !important;</code>"
|
||
],
|
||
"titleDe": "Überschreibe alle anderen Styles mit Important",
|
||
"descriptionDe": [
|
||
"Juhu! Wir haben bewiesen dass Inline Styles alle CSS Deklarationen aus deinem <code>style</code> Element überschreiben.",
|
||
"Aber warte. Es gibt eine letzte Art CSS zu überschreiben. Dabei handelt es sich um die mächtigste Methode von allen. Aber bevor wir dazu kommen, sehen wir uns an warum du überhaupt CSS überschreiben wollen würdest.",
|
||
"In vielen Situationen wirst du sogenannte \"CSS libraries\" (CSS Bibliotheken) verwenden. Diese könnten versehentlich dein eigenes CSS überschreiben. Wenn du also absolut sicher sein musst dass ein Element einen bestimmten Style hat, kannst du <code>!important</code> verwenden.",
|
||
"Gehen wir zurück zu unserer <code>pink-text</code> Klassendeklaration. Wie du dich vielleicht erinnerst wurde unsere <code>pink-text</code> Klasse von darauffolgenden Klassen, Ids und Inline Styles überschrieben.",
|
||
"Füge das Schlüsselwort <code>!important</code> zu der Farbe deines \"pink-text\" Elements hinzu um 100% sicher zu gehen dass das <code>h1</code> Element pink ist.",
|
||
"Hier ist ein Beispiel wie man das macht:",
|
||
"<code>color: red !important;</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08726",
|
||
"title": "Use Hex Code for Specific Colors",
|
||
"description": [
|
||
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.",
|
||
"We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represents values zero to nine. Then A,B,C,D,E,F represent values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.",
|
||
"In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.",
|
||
"Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>."
|
||
],
|
||
"titleRU": "Используйте hex-цвета для выбора определённых цветов",
|
||
"descriptionRU": [
|
||
"Знали ли вы, что существуют другие способы представления цветов в CSS? Одним из этих способов является шестнадцатиричный код, <code>hex-код</code>, если короче.",
|
||
"Обычно мы используем <code>десятки</code>, или десятичную систему счисления, в основе которой лежит число 10, которая использует символы от 0 до 9 для каждого числа. В основе <code>Шестнадцатиричной</code> системы лежит число 16. Это значит, что она использует шестнадцать различных символов. Как в десятичной, символы 0-9 соответствуют значениям от нуля до девяти. Далее A,B,C,D,E,F соответствуют значениям от десяти до пятнадцати. Вместе, от 0 до F, с их помощью можно представить число в <code>шестнадцатиричной</code> системе счисления, что даёт нам в целом 16 возможных значений. Вы можете найти больше информации о <a target='_blank' href='https://ru.wikipedia.org/wiki/%D0%A8%D0%B5%D1%81%D1%82%D0%BD%D0%B0%D0%B4%D1%86%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D1%87%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%81%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F'>шестнадцатиричной системе счисления тут</a>.",
|
||
"В CSS, мы можем использовать 6 шестнадцатиричных чисел для представления цвета, по два на каждый компонент: красный (R), зелёный (G), синий (B). Например, <code>#000000</code> - черный цвет и минимальное значение. Вы можете найти больше информации о <a target='_blank' href='https://ru.wikipedia.org/wiki/RGB'>цветовой модели RGB</a>.",
|
||
"Замените слово <code>black</code> в свойстве <code>background-color</code> нашего элемента <code>body</code> на представление в виде <code>hex-кода</code>, <code>#000000</code>."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: black;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Give your <code>body</code> element the background-color of black.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> for the color black instead of the word <code>black</code>. For example <code>body { color: #000000; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Você sabia que existem outras formas para representar as cores em CSS? Uma dessas formas é com o que chamamos de código hexadecimal, ou <code>código hex</code> para abreviar.",
|
||
"O sistema <code>Decimal</code> nos permite representar quantidades numéricas com os dígitos de zero a nove - assim como nós os utilizamos durante o nosso dia a dia. Já o sistema <code>Hexadecimal</code> inclui estes 10 dígitos e também as letras A, B, C, D, E e F. Isso significa que o Hexadecimal possui um total de 16 dígitos possíveis, ao invés dos 10 possíveis que podemos usar com nosso sistema numérico normal de base 10.",
|
||
"No CSS, utilizamos 6 dígitos hexadecimais para representar as cores. Por exemplo, <code>#000000</code> é o valor mais baixo possível, e representa a cor preta.",
|
||
"Substitua a palavra <code>black</code> na cor de fundo (<code>background-color</code>) de nosso elemento <code>body</code> pela sua representação hexadecimal <code>#000000</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal para Especificar Cores",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa el código hexadecimal para especificar colores",
|
||
"descriptionEs": [
|
||
"¿Sabías que hay otras maneras de representar los colores en CSS? Una de estas formas es llamada código hexadecimal o <code>código hex</code> para abreviar. ",
|
||
"El sistema <code>Decimal</code> se refiere al que nos permite representar cantidades empleando los dígitos del cero al nueve - los números que la gente usa en la vida cotidiana. El sistema <code>Hexadecimal</code> incluye estos 10 dígitos más las letras A, B, C, D, E y F. Esto significa que Hexadecimal tiene un total de 16 dígitos posibles, en lugar de las 10 posibles que nos da nuestro sistema numérico normal en base 10. ",
|
||
"Con CSS, utilizamos 6 dígitos hexadecimales para representar los colores. Por ejemplo, <code>#000000</code> es el valor más bajo posible, y representa el color negro. ",
|
||
"Reemplaza la palabra <code>black</code> en el color de fondo (<code>background-color</code>) de nuestro elemento <code>body</code> por su representación hexadecimal <code>#000000</code>"
|
||
],
|
||
"titleDe": "Verwende hexadezimal Code für spezifische Farben",
|
||
"descriptionDe": [
|
||
"Wusstest du dass es andere Möglichkeiten gibt Farben in CSS darzustellen? Eine dieser Möglichkeiten ist \"Hexadezimal Code\" genannt, oder kurz <code>hex code</code>.",
|
||
"Wir verwenden üblicherweise <code>decimals</code> (Dezimalen), oder Zehnersystem, das für jede Ziffer eine Symbol von 0 bis 9 verwendet. <code>Hexadecimals</code> (Hexadezimalzahlen oder <code>hex</code>) beruhen auf einer 16er Basis. Das bedeuted dass sie 16 verschiedene Symbole verwenden. Wie auch Dezimalzahlen, repräsentiern die Symbole \"0\"-\"9\" Null bis Neun. Dann allerdings geht es weiter mit A,B,C,D,E,F für die Zahlen 10-15. Alles in Allem kann eine einzige Ziffer, mit 0 bis F, in <code>hexadecimal</code> 16 mögliche Werte ausdrücken. Mehr Informationen über das Hexadezimalsystem kannst du <a target='_blank' href='https://de.wikipedia.org/wiki/Hexadezimalsystem'>hier</a> finden.",
|
||
"In CSS können wir 6 Hexadezimalziffern verwenden um eine Farbe auszudrücken, je zwei für den Rot- (R), Grün (G)- und Blauanteil (B). <code>#000000</code> ist zum Beispiel schwarz und der niedrigst mögliche Wert. Mehr Information über den RGB Farbraum findest du <a target:'_blank' href='https://de.wikipedia.org/wiki/RGB-Farbraum'>hier</a>.",
|
||
"Ersetzte das Wort <code>black</code> in der Hintergrundfarbe deines <code>body</code> Elements mit dem <code>hex code</code> <code>#000000</code>."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08725",
|
||
"title": "Use Hex Code to Color Elements White",
|
||
"description": [
|
||
"<code>0</code> is the lowest number in hex code, and represents a complete absence of color.",
|
||
"<code>F</code> is the highest number in hex code, and it represents the maximum possible brightness.",
|
||
"Let's turn our <code>body</code> element's background-color white by changing its hex code to <code>#FFFFFF</code>"
|
||
],
|
||
"titleRU": "Используйте hex-код, чтобы сделать элементы белыми",
|
||
"descriptionRU": [
|
||
"<code>0</code> - минимальное значение в hex-коде, оно обозначает полное отсутствие цвета.",
|
||
"<code>F</code> - максимальное значение в hex-коде, оно обозначает максимальную возможную яркость.",
|
||
"Давайте переделаем свойство <code>background-color</code> нашего элемента <code>body</code>, чтобы фон стал белый, заменив его hex-код на <code>#FFFFFF</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #000000;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your <code>body</code> element should have the <code>background-color</code> of white.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFF(FFF)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> for the color white instead of the word <code>white</code>. For example <code>body { color: #FFFFFF; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"<code>0</code> é o dígito mais baixo em código hexadecimal, e representa a completa ausência de cor.",
|
||
"<code>F</code> é o dígito mais alto em código hexadecimal, e representa o máximo de claridade possível.",
|
||
"Vamos fazer com que a cor de fundo (<code>background-color</code>) em nosso elemento <code>body</code> seja branca, mudando seu código hexadecimal para <code>#FFFFFF</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal Para dar a Cor Branca a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa el código hexadecimal para colorear de blanco los elementos",
|
||
"descriptionEs": [
|
||
"<code>0</code> es el dígito más bajo en código hexadecimal, y representa una completa ausencia de color.",
|
||
"<code>F</code> es el dígito más alto en código hexadecimal, y representa el máximo brillo posible.",
|
||
"Volvamos blanco el color de fondo (<code>background-color</code>) de nuestro elemento <code>body</code>, cambiando su código hexadecimal por <code>#FFFFFF</code>"
|
||
],
|
||
"titleDe": "Verwende Hexadezimal Code um Elemente Weiß zu färben",
|
||
"descriptionDe": [
|
||
"<code>0</code> ist die niedrigste Zahl in Hexadezimal Code und steht für die komplette Abwesenheit von Farbe.",
|
||
"<code>F</code> ist die höchste Zahl in Hexadezimal Code und steht für maximal mögliche Helligkeit.",
|
||
"Mach die Hintergrundfarbe deines <code>body</code> Element weiß indem du den Hexadezimal Code auf <code>#FFFFFF</code> änderst."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08724",
|
||
"title": "Use Hex Code to Color Elements Red",
|
||
"description": [
|
||
"You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.",
|
||
"How many colors are possible? 16 values and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors.",
|
||
"Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||
"So to get the absolute brightest red, you would just use <code>F</code> for the first and second digits (the highest possible value) and <code>0</code> for the third, fourth, fifth and sixth digits (the lowest possible value).",
|
||
"Make the <code>body</code> element's background color red by giving it the hex code value of <code>#FF0000</code>"
|
||
],
|
||
"titleRU": "Используйте hex-код, чтобы сделать элементы красными",
|
||
"descriptionRU": [
|
||
"Вы можете удивиться тому, что мы используем 6 цифр для представления цвета вместо одной или двух. Ответ заключается в том, что использование 6-ти цифр даёт нам большое разнообразие.",
|
||
"Сколько цветов возможно таким образом обозначить? 16 значений и 6 возможных положений значит, что у нас есть в распоряжении 16 в степени 6, или более 16-ти миллионов возможных цветов.",
|
||
"Hex-код соответствует модели красный-зелёный-синий, или <code>rgb</code> формату. Первые две цифры hex-кода обозначают количество красного в цвете. Третья и четвёртая - количество зелёного. Пятая и шестая - количество синего.",
|
||
"То есть для получения абсолютно яркого красного, вы бы использовали <code>F</code> в качестве первой и второй цифры (максимальное возможное значение) и <code>0</code> для третьей, четвёртой, пятой и шестой цифр (минимальное возможное значение).",
|
||
"Сделайте цвет фона элемента <code>body</code> красным, присвоив его соответствующему свойству значение hex-кода равное <code>#FF0000</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #FFFFFF;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of red.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((F00)|(FF0000))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> for the color red instead of the word <code>red</code>. For example <code>body { color: #FF0000; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Talvez você esteja se perguntando o motivo para usar 6 dígitos para representar uma cor ao invés de apenas um ou dois. Este motivo é que ao usar 6 dígitos, temos acesso a uma enorme variedade de cores.",
|
||
"Para que você tenha uma ideia, ter 16 valores e 6 posições significa que temos 16 elevado a 6. Isso dá um total de mais de 16 milhões de cores possíveis.",
|
||
"Os códigos hexadecimais seguem o formato vermelho-verde-azul (<em>red-green-blue</em>), ou formato <code>rgb</code>. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.",
|
||
"Sendo assim, para conseguir um vermelho brilhante, basta que você use <code>F</code> (o dígito mais alto possível) para o primeiro e o segundo dígitos, e <code>0</code> (o dígito mais baixo possível) para o terceiro, quarto, quinto e sexto dígito.",
|
||
"Faça com que a cor de fundo (<code>background-color</code>) do elemento <code>body</code> seja vermelho, ao dar o código hexadecimal <code>#FF0000</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal Para dar a Cor Vermelha a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa el código hexadecimal para colorear de rojo los elementos",
|
||
"descriptionEs": [
|
||
"Te puedes estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ",
|
||
"¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ",
|
||
"Los códigos hexadecimales siguen el formato rojo-verde-azul (<em>red-green-blue</em>) o formato <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .",
|
||
"Así que para conseguir el rojo absolutamente más brillante, basta que uses <code>F</code> para el primer y segundo dígitos (el valor más alto posible) y <code>0</code> para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).",
|
||
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea rojo dándole el código hexadecimal <code>#FF0000</code>"
|
||
],
|
||
"titleDe": "Verwende Hexadezimal Code um Elemente rot zu färben",
|
||
"descriptionDe": [
|
||
"Du wunderst dich vielleicht warum wir 6 Ziffern verwenden um Farben darzustellen anstatt nur eine oder zwei. Die Antwort ist, dass uns 6 Ziffern eine enorme Vielfalt geben.",
|
||
"Wieviele Farben sind möglich? 16 Werte und 6 Positionen bedeuted dass wir 16 hoch 6, oder mehr als 16 Millionen mögliche Farben zur Verfügung haben.",
|
||
"Hexadezimal Code folgt der Rot-Grün-Blau, oder <code>rgb</code>, Schreibweise. Die ersten zwei Ziffern des Hexadezimal Code geben die Menge an Rot in der Farbe an. Die dritte und vierte Ziffer die Menge an Grün. Die fünfte und sechste die Menge an Blau.",
|
||
"Um also das absolut hellste Rot zu bekommen, würdest du <code>F</code> (der höchstmögliche Wert) für die erste und zweite und <code>0</code> (der niedrigstmögliche Wert) für die dritte, vierte, fünfte und sechste Ziffer verwenden.",
|
||
"Ändere die Hintergrundfarbe des <code>body</code> Elements zu Rot indem du ihm den Hexadezimal Code <code>#FF0000</code> gibst."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08723",
|
||
"title": "Use Hex Code to Color Elements Green",
|
||
"description": [
|
||
"Remember that <code>hex code</code> follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||
"So to get the absolute brightest green, you would just use <code>F</code> for the third and fourth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
|
||
"Make the <code>body</code> element's background color green by giving it the hex code value of <code>#00FF00</code>"
|
||
],
|
||
"titleRU": "Используйте hex-код, чтобы сделать элементы зелёными",
|
||
"descriptionRU": [
|
||
"Помните, что <code>hex-код</code> соответствует модели красный-зелёный-синий, или <code>rgb</code> формату. Первые две цифры hex-кода обозначают количество красного в цвете. Третья и четвёртая - количество зелёного. Пятая и шестая - количество синего.",
|
||
"То есть для получения абсолютно яркого зелёного, вы бы использовали <code>F</code> в качестве третьей и четвёртой цифры (максимальное возможное значение) и <code>0</code> для первой, второй, пятой и шестой цифр (минимальное возможное значение).",
|
||
"Сделайте цвет фона элемента <code>body</code> зелёным, присвоив его соответствующему свойству значение hex-кода равное <code>#00FF00</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #FF0000;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of <code>green</code>.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((0F0)|(00FF00))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> for the color green instead of the word <code>green</code>. For example <code>body { color: #00FF00; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (<em>red-green-blue</em>), ou formato <code>rgb</code>. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.",
|
||
"Sendo assim, para conseguir um verde brilhante, basta que você use <code>F</code> (o dígito mais alto possível) para o terceiro e o quarto dígito, e <code>0</code> (o dígito mais baixo possível) para todos os outros dígitos.",
|
||
"Faça com que a cor de fundo (<code>background-color</code>) do elemento <code>body</code> seja verde ao dar o código hexadecimal <code>#00FF00</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal para dar a Cor Verde a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa el código hexadecimal para colorear de verde los elementos",
|
||
"descriptionEs": [
|
||
"Recuerda que el <code>código hexadecimal</code> sigue el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul.",
|
||
"Así que para conseguir el verde absoluto más brillante, sólo debes usar <code>F</code> en el tercer y cuarto dígitos (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible). ",
|
||
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea verde, dándole el código hexadecimal <code>#00FF00</code>"
|
||
],
|
||
"titleDe": "Verwende Hexadezimal Code um Elemente grün zu färben",
|
||
"descriptionDe": [
|
||
"Vergiss nicht, <code>hex code</code> folgt der Rot-Grün-Blau, oder <code>rgb</code>, Schreibweise. Die ersten zwei Ziffern des Hexadezimal Code stehen für die Menge an Rot in der Farbe. Die dritte und vierte Ziffer stehen für die Menge an Grün. Die fünfte und sechste für die Menge an Blau.",
|
||
"Um also das absolut hellste Grün zu bekommen, musst du <code>F</code> (der größtmögliche Wert) für die dritte und vierte und <code>0</code> (der niedrigste Wert) für alle anderen Ziffern verwenden.",
|
||
"Mach die Hintergrundfarbe des <code>body</code> Elements grün indem du ihm den Hexadezimal Code <code>#00FF00</code> gibst."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08722",
|
||
"title": "Use Hex Code to Color Elements Blue",
|
||
"description": [
|
||
"Hex code follows the red-green-blue, or <code>rgb</code> format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.",
|
||
"So to get the absolute brightest blue, we use <code>F</code> for the fifth and sixth digits (the highest possible value) and <code>0</code> for all the other digits (the lowest possible value).",
|
||
"Make the <code>body</code> element's background color blue by giving it the hex code value of <code>#0000FF</code>"
|
||
],
|
||
"titleRU": "Используйте hex-код, чтобы сделать элементы синими",
|
||
"descriptionRU": [
|
||
"Помните, что <code>hex-код</code> соответствует модели красный-зелёный-синий, или <code>rgb</code> формату. Первые две цифры hex-кода обозначают количество красного в цвете. Третья и четвёртая - количество зелёного. Пятая и шестая - количество синего.",
|
||
"То есть для получения абсолютно яркого синего, вы бы использовали <code>F</code> в качестве пятой и шустой цифры (максимальное возможное значение) и <code>0</code> для первой, второй, третьей и четвёртой цифр (мин<D0B8><D0BD>мальное возможное значение).",
|
||
"Сделайте цвет фона элемента <code>body</code> синим, присвоив его соответствующему свойству значение hex-кода равное <code>#0000FF</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #00FF00;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Give your <code>body</code> element the <code>background-color</code> of blue.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((00F)|(0000FF))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> for the color blue instead of the word <code>blue</code>. For example <code>body { color: #0000FF; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (<em>red-green-blue</em>), ou formato <code>rgb</code>. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.",
|
||
"Para conseguir o azul mais brilhante, utilizamos <code>F</code> (o dígito mais alto possível) no quinto e no sexto dígito, e <code>0</code> (o dígito mais baixo possível) para todos os outros dígitos.",
|
||
"Faça com que a cor de fundo (<code>background-color</code>) do elemento <code>body</code> seja azul usando o código hexadecimal <code>#0000FF</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal para dar a Cor Azul a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa el código hexadecimal para colorear de azul los elementos",
|
||
"descriptionEs": [
|
||
"Los códigos hexadecimales siguen el formato rojo-verde-azul o <code>rgb</code>. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .",
|
||
"Así que para conseguir el azul absoluto más brillante, utilizamos <code>F</code> para la quinta y sexta cifras (el valor más alto posible) y <code>0</code> para todos los otros dígitos (el valor más bajo posible ). ",
|
||
"Haz que el color de fondo (<code>background-color</code>) del elemento <code>body</code> sea azul, dándole el código hexadecimal <code>#0000FF</code>"
|
||
],
|
||
"titleDe": "Verwende Hexadezimal Code um Elemente blau zu färben",
|
||
"descriptionDe": [
|
||
"Hexadezimal Code folgt der Rot-Grün-Blau, oder <code>rgb</code>, Schreibweise. Die ersten zwei Ziffern stehen für die Menge an Rot in der Farbe. Die dritte und vierte Ziffer repräsentiert die Menge an Grün. Die fünfte und sechste steht für die Menge an Blau.",
|
||
"Um also das hellste Blau zu bekommen, verwenden wir <code>F</code> (größtmöglicher Wert) für die fünfte und sechste und <code>0</code> (der niedrigste Wert) für alle anderen Ziffern.",
|
||
"Mach die Hintergrundfarbe des <code>body</code> Elements blau indem du den Hexadezimal Code mit dem Wert <code>#0000FF</code> verwendest."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08721",
|
||
"title": "Use Hex Code to Mix Colors",
|
||
"description": [
|
||
"From these three pure colors (red, green and blue), we can create 16 million other colors.",
|
||
"For example, orange is pure red, mixed with some green, and no blue.",
|
||
"Make the <code>body</code> element's background color orange by giving it the hex code value of <code>#FFA500</code>"
|
||
],
|
||
"titleRU": "Используйте hex-код, чтобы смешивать цвета",
|
||
"descriptionRU": [
|
||
"Из этих трёх чистых цветов (красного, зелёного и синего), мы можем создать 16 миллионов других цветов.",
|
||
"Например, оранжевый - смесь чистого красного с примесью зелёного, но без синего.",
|
||
"Сделайте цвет фона элемента <code>body</code> оранжевым, присвоив его соответствующему свойству значение hex-кода равное <code>#FFA500</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #0000FF;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of orange.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFA500((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>. For example <code>body { color: #FFA500; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.",
|
||
"Por exemplo, o laranja é vermelho puro misturado com um pouco de verde, e sem nada de azul.",
|
||
"Faça com que a cor de fundo do elemento <code>body</code> seja alaranjada, usando o código hexadecimal <code>#FFA500</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal para Misturar Cores",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa código hex para mezclar colores",
|
||
"descriptionEs": [
|
||
"A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.",
|
||
"Por ejemplo, el naranja es rojo puro, mezclado con un poco de verde, y sin azul.",
|
||
"Haz que el color de fondo del elemento <code>body</code> sea anaranjado, dándole el código hexadecimal <code>#FFA500</code>"
|
||
],
|
||
"titleDe": "Verwende Hexadezimal Code um Farben zu mischen",
|
||
"descriptionDe": [
|
||
"Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.",
|
||
"Orange, zum Beispiel, ist pures Rot, gemischt mit ein bisschen Grün und keinem Blau",
|
||
"Gib dem <code>body</code> Element eine orange Hintergrundfarbe indem du den Hexadezimal Code <code>#FFA500</code> verwendest."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08720",
|
||
"title": "Use Hex Code to Color Elements Gray",
|
||
"description": [
|
||
"From these three pure colors (red, green and blue), we can create 16 million other colors.",
|
||
"We can also create different shades of gray by evenly mixing all three colors.",
|
||
"Make the <code>body</code> element's background color gray by giving it the hex code value of <code>#808080</code>"
|
||
],
|
||
"titleRU": "Используйте hex-код, чтобы сделать элементы серыми",
|
||
"descriptionRU": [
|
||
"Из этих трёх чистых цветов (красного, зелёного и синего), мы можем создать 16 миллионов других цветов.",
|
||
"Также мы можем создавать различные оттенки серого смешивая равномерно все три цвета.",
|
||
"Сделайте цвет фона элемента <code>body</code> серым, присвоив его соответствующему свойству значение hex-кода равное <code>#808080</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #FFA500;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Give your <code>body</code> element the <code>background-color</code> of gray.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#808080((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the <code>hex code</code> the color gray instead of the word <code>gray</code>. For example <code>body { color: #808080; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.",
|
||
"Também podemos criar tons de cinza diferentes ao misturar essas três cores.",
|
||
"Faça com que a cor de fundo do elemento <code>body</code> seja cinza, usando o código hexadecimal <code>#808080</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal dar a Cor Cinza a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa el código hexadecimal para colorear de gris los elementos",
|
||
"descriptionEs": [
|
||
"A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.",
|
||
"También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.",
|
||
"Haz que el color de fondo del elemento <code>body</code> sea gris, dándole el código hexadecimal <code>#808080</code>"
|
||
],
|
||
"titleDe": "Verwende Hexadezimal Code um Elemente grau zu färben",
|
||
"descriptionDe": [
|
||
"Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.",
|
||
"Wir können auch verschiedene Grautöne erzeugen indem wir alle drei Farben in gleichen Teilen mischen.",
|
||
"Gib dem <code>body</code> Element eine graue Hintergrundfarbe indem du den Hexadezimal Code <code>#808080</code> verwendest."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08720",
|
||
"title": "Use Hex Code for Specific Shades of Gray",
|
||
"description": [
|
||
"We can also create other shades of gray by evenly mixing all three colors. We can go very close to true black.",
|
||
"Make the <code>body</code> element's background color a dark gray by giving it the hex code value of <code>#111111</code>"
|
||
],
|
||
"titleRU": "Используйте hex-код для получения определённого оттенка серого",
|
||
"descriptionRU": [
|
||
"Также мы можем создавать другие оттенки серого равномерным смешением всех трёх цветов. Так мы можем добраться почти до абсолютно чёрного.",
|
||
"Сделайте цвет фона элемента <code>body</code> тёмно-серым, присвоив его соответствующему свойству значение hex-кода равное <code>#111111</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #808080;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'message: Give your <code>body</code> element the <code>background-color</code> of a dark gray.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#111(111)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use <code>hex code</code> to make a dark gray. For example <code>body { color: #111111; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Também podemos criar tons de cinza diferentes ao misturar essas três cores. Podemos chegar muito perto de um fundo completamente preto.",
|
||
"Faça com que a cor de fundo do elemento <code>body</code> seja cinza escuro através do código hexadecimal <code>#111111</code>."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal dar Tons de Cinza a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa el código hexadecimal para colorear con tonos de gris",
|
||
"descriptionEs": [
|
||
"También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ",
|
||
"Haz que el color de fondo del elemento <code>body</code> sea gris oscuro dandole el código hexadecimal <code>#111111</code>"
|
||
],
|
||
"titleDe": "Verwende Hexadezimal Code für spezifische Grautöne",
|
||
"descriptionDe": [
|
||
"Wir können auch andere Grautöne erzeugen indem wir alle drei Farben gleichmäßig mischen. Damit können wir uns an echtes Schwarz annähern.",
|
||
"Gib dem <code>body</code> Element eine dunkelgraue Hintergrundfarbe indem du den Hexadezimal Code <code>#111111</code> verwendest."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08719",
|
||
"title": "Use Abbreviated Hex Code",
|
||
"description": [
|
||
"Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.",
|
||
"For example, red, which is <code>#FF0000</code> in hex code, can be shortened to <code>#F00</code>. That is, one digit for red, one digit for green, one digit for blue.",
|
||
"This reduces the total number of possible colors to around 4,000. But browsers will interpret <code>#FF0000</code> and <code>#F00</code> as exactly the same color.",
|
||
"Go ahead, try using <code>#F00</code> to turn the <code>body</code> element's background-color red."
|
||
],
|
||
"titleRU": "Используйте аббревиатуры hex-кода",
|
||
"descriptionRU": [
|
||
"Множество людей обременяет возможность применения более 16-ти миллионов цветов. И hex-коды достаточно сложно запоминать. К счастью, вы можете использовать укороченные выражения.",
|
||
"Например, красный, который имеет значение <code>#FF0000</code> в виде hex-кода, может быть укорочен до <code>#F00</code>. В укороченном виде: одна цифра представляет красный, одна - зелёный, одна - синий.",
|
||
"Это уменьшает общее количество возможных цветов до порядка 4,000. Но браузеры будут интерпретировать <code>#FF0000</code> и <code>#F00</code> как один и тот же цвет.",
|
||
"Вперёд, попробуйте применить значение <code>#F00</code>, чтобы сделать цвет фона элемента <code>body</code> красным."
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #111111;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your <code>body</code> element the <code>background-color</code> of red.');",
|
||
"assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#F00((\\s*})|(\\s*;[\\s\\S]*?}))/gi), 'message: Use <code>abbreviated hex code</code> instead of a six-character <code>hex code</code>. For example <code>body { color: #F00; }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Muitas pessoas se sentem confusas com as possibilidades de mais de 16 milhões de cores. Além disso, é difícil lembrar de códigos hexadecimais. Por sorte, podemos abreviá-lo.",
|
||
"Por exemplo, o vermelho que é <code>#FF0000</code> em código hexadecimal pode ser abreviado a <code>#F00</code>. Isso quer dizer que podemos usar um dígito para vermelho, um dígito para verde e um dígito para azul.",
|
||
"Fazer isso reduz o número total de possíveis cores para ao redor de 4.000. Apesar disso, os navegadores interpretarão <code>#FF0000</code> e <code>#F00</code> exatamente como a mesma cor.",
|
||
"Continue, tente usar <code>#F00</code> para fazer com que a cor de fundo do elemento <code>body</code> seja vermelha."
|
||
],
|
||
"namePtBR": "Use Código Hexadecimal Abreviado",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Uso código hex abreviado",
|
||
"descriptionEs": [
|
||
"Mucha gente se siente abrumada por las posibilidades de más de 16 millones de colores. Y es difícil recordar el código hexadecimal. Afortunadamente puedes acortarlo. ",
|
||
"Por ejemplo, el rojo, que es <code>#FF0000</code> en código hexadecimal, se puede abreviar a <code>#F00</code>. Es decir, un dígito para el rojo, un dígito para el verde, un dígito para el azul. ",
|
||
"Esto reduce el número total de posibles colores a alrededor de 4.000. Pero los navegadores interpretarán <code>#FF0000</code> y <code>#F00</code> como exactamente el mismo color. ",
|
||
"Adelante, intenta usar <code>#F00</code> para volver rojo el color de fondo del elemento <code>body</code>."
|
||
],
|
||
"titleDe": "Verwende abgekürzten Hexadezimal Code",
|
||
"descriptionDe": [
|
||
"Viele Leute fühlen sich mit der Auswahl aus über 16 Millionen Farben überfordert. Außerdem ist es schwierig sich Hexadezimal Codes zu merken. Zum Glück kannst du sie abkürzen.",
|
||
"Rot, zum Beispiel, mit dem Hexadezimal Code von <code>#FF0000</code> kannst du mit <code>#F00</code> abkürzen. Das bedeuted eine Ziffer für Rot, eine für Grün und eine für Blau",
|
||
"Das reduziert die Gesamtsumme an möglichen Farben auf ungefähr 4.000. Aber Browser interpretieren <code>#FF0000</code> und <code>#F00</code> als exakt die gleiche Farbe.",
|
||
"Probiere <code>#F00</code> aus um die Hintergrundfarbe des <code>body</code> Elements rot zu färben."
|
||
]
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08718",
|
||
"title": "Use RGB values to Color Elements",
|
||
"description": [
|
||
"Another way you can represent colors in CSS is by using <code>rgb</code> values.",
|
||
"The RGB value for black looks like this:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"The RGB value for white looks like this:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Instead of using six hexadecimal digits like you do with hex code, with <code>rgb</code> you specify the brightness of each color with a number between 0 and 255.",
|
||
"If you do the math, 16 times 16 is 256 total values. So <code>rgb</code>, which starts counting from zero, has the exact same number of possible values as hex code.",
|
||
"Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
|
||
],
|
||
"titleRU": "Используйте формат RGB для придания цвета элементам",
|
||
"descriptionRU": [
|
||
"Другим способом представления цветов в CSS является применение значений <code>rgb</code>.",
|
||
"Значение RGB для чёрного цвета выглядит следующим образом:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"Значение RGB для белого выглядит так:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Вместо использования шести шестнадцатиразрядных цифр, как вы делаете, когда применяете hex-код, применяя <code>rgb</code> вы указываете значение яркости каждого цвета в диапазоне от 0 до 255.",
|
||
"Если вы посчитаете, 16 раз по 16 - это 256 различных значений. Таким образом <code>rgb</code>, где счёт начинается с нуля, имеет ровно то же число возможных значений, что и hex-код.",
|
||
"Давайте заменим hex-код в цвете фона нашего элемента <code>body</code> на значение в формате RGB для получения чёрного: <code>rgb(0, 0, 0)</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: #F00;",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your <code>body</code> element should have a black background.');",
|
||
"assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of black. For example <code>body { background-color: rgb(0, 0, 0); }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Outra forma em que você pode representar cores em CSS é utilizando valores <code>rgb</code>.",
|
||
"O valor RGB para preto é assim:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"O valor RGB para branco é assim:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.",
|
||
"Se você fizer a matemática, 16 vezes 16 é igual a 256 valores totais. Sendo assim, o <code>rgb</code>, que começa a contar desde zero, tem exatamente o mesmo número de valores possíveis que o código hexadecimal.",
|
||
"Vamos substituir o código hexadecimal da cor de fundo do nosso elemento <code>body</code> pelo valor RGB para preto: <code>rgb(0, 0, 0)</code>."
|
||
],
|
||
"namePtBR": "Use Valores RBG para Colorir Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa RGB para colorear elementos",
|
||
"descriptionEs": [
|
||
"Otra forma en la que puedes representar colores en CSS es usando valores <code>rgb</code>.",
|
||
"El valor RGB para el negro, luce así:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"El valor RGB para el blanco, se ve así:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"En lugar de utilizar seis dígitos hexadecimales, con <code>rgb</code> especificas el brillo de cada color con un número entre 0 y 255.",
|
||
"Si haces la matemática, 16 veces 16 es 256 valores totales. Así que <code>rgb</code>, que comienza a contar desde cero, tiene exactamente el mismo número de valores posibles que el código hexadecimal.",
|
||
"Remplacemos el código hexadecimal del color de fondo de nuestro elemento <code>body</code> por el valor RGB para el negro: <code>rgb(0, 0, 0)</code>"
|
||
],
|
||
"titleDe": "Verwende RGB Werte um Elemente zu färben",
|
||
"descriptionDe": [
|
||
"Ein anderer Weg um Farben in CSS darzustellen ist <code>rgb</code> Werte zu verwenden.",
|
||
"Der RGB Wert für Schwarz sieht so aus:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"Der RGB Wert für Weiß sieht so aus:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit <code>rgb</code> die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.",
|
||
"Wenn du nachrechnest, 16 mal 16 ist 256 Werte. Also hat <code>rgb</code>, das mit Null hochzuzählen beginnt, die gleiche Anzahl an möglichen Farben wie Hexadezimal Code.",
|
||
"Ersetzte jetzt den Hexadezimal Code der Hintergrundfarbe deines <code>body</code> Elements mit dem RGB Wert für Schwarz: <code>rgb(0, 0, 0)</code>"
|
||
|
||
]
|
||
},
|
||
{
|
||
"id": "bad88fee1348bd9aedf08726",
|
||
"title": "Use RGB to Color Elements White",
|
||
"description": [
|
||
"The RGB value for black looks like this:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"The RGB value for white looks like this:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Instead of using six hexadecimal digits like you do with hex code, with <code>rgb</code> you specify the brightness of each color with a number between 0 and 255.",
|
||
"Change the <code>body</code> element's background color from the RGB value for black to the <code>rgb</code> value for white: <code>rgb(255, 255, 255)</code>"
|
||
],
|
||
"titleRU": "Используйте формат RGB, чтобы сделать элементы белыми",
|
||
"descriptionRU": [
|
||
"Значение RGB для чёрного цвета выглядит следующим образом:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"Значение RGB для белого выглядит так:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Вместо использования шести шестнадцатиразрядных цифр, как вы делаете, когда применяете hex-код, применяя <code>rgb</code> вы указываете значение яркости каждого цвета в диапазоне от 0 до 255.",
|
||
"Измените цвет фона элемента <code>body</code> со значения соответствующего чёрному в формате RGB на значение соответствующее белому: <code>rgb(255, 255, 255)</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: rgb(0, 0, 0);",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your <code>body</code> should have a white background.');",
|
||
"assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of white. For example <code>body { background-color: rgb(255, 255 , 255); }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"O valor RGB para preto é assim:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"O valor RGB para branco é assim:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Ao invés de utilizar 6 dígitos hexadecimais, com <code>rgb</code> você especifica o brilho de cada cor com um número entre 0 e 255.",
|
||
"Substitua o código hexadecimal da cor de fundo do nosso elemento <code>body</code> que possui o valor RGB para preto, pelo valor <code>rgb</code> para branco: <code>rgb(255, 255, 255)</code>."
|
||
],
|
||
"namePtBR": "Use Valores RGB para Dar a Cor Branca a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa RGB para colorear de blanco los elementos",
|
||
"descriptionEs": [
|
||
"El valor RGB para el negro, luce así:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"El valor RGB para el blanco, se ve así:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"En lugar de utilizar seis dígitos hexadecimales, con <code>rgb</code> especificas el brillo de cada color con un número entre 0 y 255.",
|
||
"Cambia el color de fondo del elemento <code>body</code> del valor RGB para el negro al valor <code>rgb</code> para el blanco: <code>rgb(255, 255, 255)</code>"
|
||
],
|
||
"titleDe": "Verwende RGB Werte um Elemente weiß zu färben",
|
||
"descriptionDe": [
|
||
"Der RGB Wert für Schwarz sieht so aus:",
|
||
"<code>rgb(0, 0, 0)</code>",
|
||
"Der RGB Wert für Weiß sieht so aus:",
|
||
"<code>rgb(255, 255, 255)</code>",
|
||
"Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit <code>rgb</code> die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.",
|
||
"Ändere die Hintergrundfarbe des <code>body</code> Elements vom RGB Wert für Schwarz zum <code>rgb</code> Wert für Weiß: <code>rgb(255, 255, 255)</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad89fee1348bd9aedf08724",
|
||
"title": "Use RGB to Color Elements Red",
|
||
"description": [
|
||
"Just like with hex code, you can represent different colors in RGB by using combinations of different values.",
|
||
"These values follow the pattern of RGB: the first number represents red, the second number represents green, and the third number represents blue.",
|
||
"Change the <code>body</code> element's background color to the RGB value red: <code>rgb(255, 0, 0)</code>"
|
||
],
|
||
"titleRU": "Используйте формат RGB, чтобы сделать элементы красными",
|
||
"descriptionRU": [
|
||
"Также как и в hex-коде, вы можете представлять различные цвета в формате RGB с помощью комбинаций различных значений.",
|
||
"Эти значения соответствуют модели RGB: первое число - красный, второе - зелёный, третье - синий.",
|
||
"Измените цвет фона элемента <code>body</code> на значение в формате RGB соответствующее красному: <code>rgb(255, 0, 0)</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: rgb(255, 255, 255);",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Your <code>body</code> should have a red background.');",
|
||
"assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of red. For example <code>body { background-color: rgb(255, 0, 0); }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Da mesma forma que com códigos em hexadecimal, você pode representar cores diferentes em RGB através do uso de combinações com diferentes valores.",
|
||
"Esses valores seguem o padrão de RGB: O primeiro número representa vermelho, o segundo representa verde, e o terceiro representa azul.",
|
||
"Mude a cor de fundo do elemento <code>body</code> para vermelho usando seu valor RGB: <code>rgb(255, 0, 0)</code>."
|
||
],
|
||
"namePtBR": "Use Valores RBG para Dar a Cor Vermelha a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa RGB para colorear de rojo los elementos",
|
||
"descriptionEs": [
|
||
"Al igual que con el código hexadecimal, puedes representar diferentes colores en RGB mediante el uso de combinaciones de diferentes valores.",
|
||
"Estos valores siguen el patrón de RGB: el primer número representa rojo, el segundo número representa el verde, y el tercer número representa azul.",
|
||
"Cambia el color de fondo del elemento <code>body</code> al rojo usando su valor RGB: <code>rgb(255, 0, 0)</code>"
|
||
],
|
||
"titleDe": "Verwende RGB um Elemente rot zu färben",
|
||
"descriptionDe": [
|
||
"Wie auch beim Hexadezimal Code, kannst du verschiedene Farben in RGB durch die Kombination von verschiedenen Werten festlegen.",
|
||
"Diese Werte folgen dem Muster von RGB: die erste Zahl steht für Rot, die zweite für Grün und die dritte für Blau.",
|
||
"Ändere die Hintergrundfarbe des <code>body</code> ELements zum RGB Wert für Rot: <code>rgb(255, 0, 0)</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad80fee1348bd9aedf08723",
|
||
"title": "Use RGB to Color Elements Green",
|
||
"description": [
|
||
"Now change the <code>body</code> element's background color to the <code>rgb</code> value green: <code>rgb(0, 255, 0)</code>"
|
||
],
|
||
"titleRU": "Используйте формат RGB, чтобы сделать элементы зелёными",
|
||
"descriptionRU": [
|
||
"Теперь измените цвет фона элемента <code>body</code> на значение <code>rgb</code> соответствующее зелёному: <code>rgb(0, 255, 0)</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: rgb(255, 0, 0);",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Your <code>body</code> element should have a green background.');",
|
||
"assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of green. For example <code>body { background-color: rgb(0, 255, 0); }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Agora, mude a cor de fundo do elemento <code>body</code> para verde usando seu valor RGB: <code>rgb (0, 255, 0)</code>."
|
||
],
|
||
"namePtBR": "Use Valores RBG para Dar a Cor Verde a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa RGB para colorear de verde los elementos",
|
||
"descriptionEs": [
|
||
"Ahora cambia el color de fondo del elemento <code>body</code> a verde usando su valor RGB: <code>rgb (0, 255, 0)</code>"
|
||
],
|
||
"titleDe": "Verwende RGB um Elemente grün zu färben",
|
||
"descriptionDe": [
|
||
"Jetzt ändere die Hintergrundfarbe des <code>body</code> Elements zum <code>rgb</code> Wert von Grün: <code>rgb(0, 255, 0)</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad81fee1348bd9aedf08722",
|
||
"title": "Use RGB to Color Elements Blue",
|
||
"description": [
|
||
"Change the <code>body</code> element's background color to the RGB value blue: <code>rgb(0, 0, 255)</code>"
|
||
],
|
||
"titleRU": "Используйте формат RGB, чтобы сделать элементы синими",
|
||
"descriptionRU": [
|
||
"Измените цвет фона элемента <code>body</code> на значение в формате RGB соответствующее синему: <code>rgb(0, 0, 255)</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: rgb(0, 255, 0);",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Your <code>body</code> element should have a blue background.');",
|
||
"assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of blue. For example <code>body { background-color: rgb(0, 0, 255); }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Agora, mude a cor de fundo do elemento <code>body</code> para azul usando seu valor RGB: <code>rgb(0, 0, 255)</code>."
|
||
],
|
||
"namePtBR": "Use Valores RBG para Dar a Cor Azul a Elementos",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa RGB para colorear de azul los elementos",
|
||
"descriptionEs": [
|
||
"Cambia el color de fondo del elemento <code>body</code> a azul usando su valor RGB: <code>rgb(0, 0, 255)</code>"
|
||
],
|
||
"titleDe": "Verwende RGB um Elemente Blau zu färben",
|
||
"descriptionDe": [
|
||
"Ändere die Hintergrundfarbe des <code>body</code> Elements zum RGB Wert von Blau: <code>rgb(0, 0, 255)</code>"
|
||
]
|
||
},
|
||
{
|
||
"id": "bad82fee1348bd9aedf08721",
|
||
"title": "Use RGB to Mix Colors",
|
||
"description": [
|
||
"Just like with hex code, you can mix colors in RGB by using combinations of different values.",
|
||
"Change the <code>body</code> element's background color to the RGB value orange: <code>rgb(255, 165, 0)</code>"
|
||
],
|
||
"titleRU": "Используйте формат RGB, чтобы смешивать цвета",
|
||
"descriptionRU": [
|
||
"Так же как и с hex-кодом, вы можете смешивать цвета в формате RGB, используя комбинации различных значений.",
|
||
"Измените цвет фона элемента <code>body</code> на значение в формате RGB соответствующее оранжевому: <code>rgb(255, 165, 0)</code>"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" body {",
|
||
" background-color: rgb(0, 0, 255);",
|
||
" }",
|
||
"</style>"
|
||
],
|
||
"tests": [
|
||
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Your <code>body</code> element should have an orange background.');",
|
||
"assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'message: Use <code>rgb</code> to give your <code>body</code> element the <code>background-color</code> of orange. For example <code>body { background-color: rgb(255, 165, 0); }</code>');"
|
||
],
|
||
"descriptionPtBR": [
|
||
"Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.",
|
||
"Mude a cor de fundo do elemento <code>body</code> para alaranjado usando seu valor RGB: <code>rgb(255, 165, 0)</code>."
|
||
],
|
||
"namePtBR": "Use Valores RBG para Misturar Cores",
|
||
"type": "waypoint",
|
||
"challengeType": 0,
|
||
"titleEs": "Usa RGB para mezclar colores",
|
||
"descriptionEs": [
|
||
"Al igual que con el código hexadecimal, puedes mezclar los colores en RGB mediante el uso de combinaciones de diferentes valores.",
|
||
"Cambia el color de fondo del elemento <code>body</code> a anaranjado usando su valor RGB: <code>rgb(255, 165, 0)</code>"
|
||
],
|
||
"titleDe": "Verwende RGB um Farben zu mischen",
|
||
"descriptionDe": [
|
||
"Wie auch mit Hexadezimal Code, kannst du Farben in RGB mischen indem du Kombination von verschiedenen Werten nimmst.",
|
||
"Ändere die Hintergrundfarbe des <code>body</code> Elements zum RGB Wert von Orange: <code>rgb(255, 165, 0)</code>"
|
||
]
|
||
}
|
||
]
|
||
}
|