diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 5486673055..76b1823684 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -26,6 +26,20 @@ "Sobald du eine Challenge abgeschlossen hast und alle Tests erfolgreich sind, wird der Button \"Go to my next challenge\" aktiv. Klicke auf diesen – oder drücke Steuerung (Control) und gleichzeitig Enter – um zur nächsten Challenge zu gehen.", "Um den Button \"Go to my next challenge\" dieser Lektion zu aktivieren, ändere den Inhalt des h1 Tags von \"Hello\" zu \"Hello World\"." ], + "titleRU": "Скажи привет HTML-элементам", + "descriptionRU": [ + "Добро пожаловать на первое программное испытание Free Code Camp.", + "Вы можете редактировать код в вашем текстовом редакторе, который мы встроили в эту web-страницу.", + "Видите этот код в вашем текстовом редакторе: <h1>Hello</h1>? Это HTML элемент.", + "Большинство HTML-элементов имеют открывающую метку закрывающую метку.", + "Открывающие метки выглядят так:", + "<h1>", + "Закрывающие метки выглядят следующим образом:", + "</h1>", + "Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.", + "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.", + "Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"." + ], "title": "Say Hello to HTML Elements", "description": [ "Welcome to Free Code Camp's first coding challenge.", @@ -81,6 +95,14 @@ "Dieses Element sagt dem Browser, wie der darin enthaltene Text gerendert wird.", "h2 Elemente sind ein wenig kleiner als h2 Elemente. Es gibt auch h3, h4, h5 und h6 Elemente." ], + "titleRU": "Заголовок с применением элемента h2", + "descriptionRU": [ + "В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:", + "\"A", + "Вводимый вами элемент h2 создаст соответствующий элемент h2 на web-странице.", + "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.", + "Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"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:", @@ -125,6 +147,13 @@ "p Elemente sind das bevorzugte Element für normalen Paragraphen-Text auf einer Website. P ist die Abkürzung für \"Paragraph\".", "Du kannst ein p Element so erzeugen: <p>Ich bin ein p Element!</p>" ], + "titleRU": "Проинформируйте с применением элемента p", + "descriptionRU": [ + "Элементы p предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".", + "Вы можете создать элемент p следующим образом:", + "<p>Я метка p!</p>", + "Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"." + ], "title": "Inform with the Paragraph Element", "description": [ "p elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".", @@ -167,6 +196,13 @@ "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.", "Du kannst einen Kommentar mit <!-- starten und ihn mit --> wieder beenden." ], + "titleRU": "Раскомментируйте HTML", + "descriptionRU": [ + "Комментирование - способ хранения заметок по коду без воздействия на сам код.", + "Также комментирование - неплохой метод отключения части кода без необходимости его удаления.", + "Вы можете начать комментарий с <!-- и закончить его -->", + "Раскомментируйте свои элементы h1, h2 и p." + ], "title": "Uncomment HTML", "description": [ "Commenting is a way that you can leave comments within your code without affecting the code itself.", @@ -213,6 +249,12 @@ "Denk daran, dass du einen Kommentar mit <!-- anfangen und mit --> wieder beenden kannst.", "Hier wirst du deinen Kommentar vor dem h2 Element beenden müssen." ], + "titleRU": "Закомментируйте HTML", + "descriptionRU": [ + "Помните, что для начала комментария вам необходимо использовать <!--, а для завершения комментария - -->", + "Тут вам необходимо завершить комментарий до начала вашего элемента h2.", + "Закомментируйте ваши элементы h1 и p, но оставьте ваш элемент h2 раскомментированным." + ], "title": "Comment out HTML", "description": [ "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->", @@ -260,6 +302,13 @@ "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber \"Kitty Ipsum\" nutzen!", "Hier sind die ersten paar Wörter von \"Kitty Ipsum\", die du kopieren und an die richtige Stelle einfügen kannst: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], + "titleRU": "Заполните пустоты замещающим текстом", + "descriptionRU": [ + "Традиционно web-разработчики используют текст lorem ipsum в качестве замещающего текста. Он называется тектсом lorem ipsum по первым двум словам известного пассажа Цицерона из Древнего Рима.", + "Текст lorem ipsum применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.", + "5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом kitty ipsum.", + "Замените текст внутри вашего элемента p первыми двумя словами текста kitty ipsum: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ], "title": "Fill in the Blank with Placeholder Text", "description": [ "Web developers traditionally use lorem ipsum text as placeholder text. It's called lorem ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.", @@ -301,6 +350,12 @@ "Unser Smartphone hat nicht sehr viel vertikalen Raum.", "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp bauen können." ], + "titleRU": "Удалите HTML-элементы", + "descriptionRU": [ + "Наш телефон не очень большой по-вертикали.", + "Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.", + "Удалите ваш h1 элемент, чтобы упростить общий вид." + ], "title": "Delete HTML Elements", "description": [ "Our phone doesn't have much vertical space.", @@ -345,6 +400,15 @@ "Wir können das bewerkstelligen, indem wir den \"style\" des h2 Elements ändern.", "So könntest du die Textfarbe des h2 Elements in Blau ändern: <h2 style=\"color: blue\">CatPhotoApp</h2>" ], + "titleRU": "Измените цвет текста", + "descriptionRU": [ + "Теперь давайте изменим цвет части нашего текста.", + "Мы можем сделать это изменив style нашего элемента h2.", + "Параметр стиля, отвечающий за цвет текста внутри элемента - \"color\".", + "Вот как вы могли бы установить цвет текста вашего элемента h2 синим:", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "Измените стиль вашего элемента h2 таким образом, чтобы текст элемента стал красным." + ], "title": "Change the Color of Text", "description": [ "Now let's change the color of some of our text.", @@ -399,6 +463,18 @@ "Innerhalb des Style Elements kannst du einen CSS Selektor oder \"selector\" für alle h2 Elemente erstellen. Wenn du zum Beispiel alle h2 Elemente Rot färben willst, schreibst du: <style>h2 {color: red;}</style>", "Beachte, dass du öffnende und schließende geschwungene Klammern ({ und }) um jeden Style setzen solltest. Außerdem sollten deine Styles innerhalb dieser Klammern stehen. Zum Schluss benötigst du am Ende jedes Styles ein Semikolon." ], + "titleRU": "Используйте CSS-селекторы для стилизации элементов", + "descriptionRU": [ + "В CSS существуют сотни CSS-свойств, которые вы можете использовать для изменения внешнего вида элементов вашей страницы.", + "Когда вы вводите <h2 style=\"color: red\">CatPhotoApp</h2>, вы присваиваете определённому h2 элементу встроенный стиль.", + "Это один из способов добавления стиля к элементу, но лучший способ - использование CSS, который является сокращением от Cascading Style Sheets (Каскадные таблицы стилей).", + "Вверху вашего кода создайте элемент style следующим образом:", + "
<style>
</style>
", + "Внутри этого элемента style вы можете создать CSS-селектор для всех элементов h2 в документе. Например, если бы вы хотели, чтобы все элементы h2 были красными, ваш элемент style выглядел бы следующим образом:", + "
<style>
  h2 {color: red;}
</style>
", + "Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок ({ и }) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента style. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.", + "Удалите атрибут стиль вашего элемента h2 и взамен создайте CSS-элемент style. Добавьте необходимый CSS, чтобы все элементы h2 стали синими." + ], "title": "Use CSS Selectors to Style Elements", "description": [ "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", @@ -467,6 +543,18 @@ "Beachte, dass Klassen in deinem CSS style Element mit einem Punkt beginngen sollten. In deinen Klassen-Deklarationen von HTML Elementen sollten diese nicht mit einem Punkt beginnen.", "Anstatt ein neues style Element zu erstellen, versuche die h2 Style-Deklaration von deinem bereits bestehenden Style Element zu entfernen und sie mit der Klassen-Deklaration \".red-text\" zu ersetzen." ], + "titleRU": "Используйте CSS-класс для стилизации элемента", + "descriptionRU": [ + "Классы являются повторно применяемыми стилями, которые могут быть добавлены к HTML-элементам.", + "Вот пример объявления CSS-класса:", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "Вы можете увидеть, что мы создали CSS-класс названный blue-text внутри элемента <style>.", + "Вы можете применить класс к HTML-элементу следующим образом:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Обратите внимание, что в вашем CSS-элементе style названию классов следует начинаться с точки. При присваивании классов HTML-элементам названия классов не должны начинаться с точки.", + "Внутри вашего элемента style, замените селектор h2 на .red-text и измените значение цвета с blue на red.", + "Присвойте вашему элементу h2 атрибут class со значением 'red-text'." + ], "title": "Use a CSS Class to Style an Element", "description": [ "Classes are reusable styles that can be added to HTML elements.", @@ -530,6 +618,15 @@ "Du kannst Klassen zu HTML Elementen hinzufügen, indem du zum Beispiel class=\"deine-klasse\" innerhalb des öffnenden Tags schreibst.", "Du weißt, es gehört ein Punkt vor CSS Klassen: .red-text { color: blue; }. Aber diese Klassen-Deklarationen brauchen keinen Punkt: <h2 class=\"blue-text\">CatPhotoApp<h2>" ], + "titleRU": "Стилизуйте множество элементов с помощью CSS-класса", + "descriptionRU": [ + "Помните, что вы можете присваивать классы HTML-элементам используя class=\"ваш-класс-тут\" внутри открывающей метки соответствующего элемента.", + "Помните, что селекторы CSS-классов должны начинаться с точки, например:", + "
.blue-text {
  color: blue;
}
", + "Но также не забывайте, что присваивание классов не использует точку, например:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Примените класс red-text к вашим элементам h2 и p." + ], "title": "Style Multiple Elements with a CSS Class", "description": [ "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", @@ -586,6 +683,15 @@ "Zuerst erstellst du ein zweites p Element mit dem folgenden Kitty Ipsum Text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", "Versuche nun beiden p Elementen die Schriftgröße von 16 Pixeln (16px) zu geben. Du kannst das innerhalb des selben <style> Tags machen, welches wir für deine \"red-text\" Klasse erstellt haben." ], + "titleRU": "Измените размер шрифта элемента", + "descriptionRU": [ + "Размером шрифта управляют с помощтю CSS-своайства font-size, например:", + "
h1 {
  font-size: 30px;
}
", + "Создайте второй элемент p со следующи текстом kitty ipsum: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Внутри того же элемента <style>, который содержит ваш класс red-text, создайте вхождение для элементов p и установите свойство font-size равным 16 пикселей (16px).", + "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания.", + "Также, пожалуйста, не добавляйте атрибут класс к вашему новому элементу p." + ], "title": "Change the Font Size of an Element", "description": [ "Font size is controlled by the font-size CSS property, like this:", @@ -642,6 +748,13 @@ "Du kannst einem Element mit \"font-family\" eine Schriftart zuweisen.", "Wenn du zum Beispiel deinem h2 Element die Schriftart \"Sans-serif\" zuweisen willst, kannst du das mit dem folgenden CSS tun: h2 { font-family: Sans-serif; }" ], + "titleRU": "Установите семейство шрифтов для элемента", + "descriptionRU": [ + "Вы можете установить семейство шрифтов для элемента используя свойство font-family.", + "Например, если бы вы хотели установить семейство шрифтов Sans-serif для вашего элемента h2, вы бы использовали следующий CSS:", + "
h2 {
  font-family: Sans-serif;
}
", + "Присвойте шрифт Monospace всем вашим элементам p." + ], "title": "Set the Font Family of an Element", "description": [ "You can set an element's font by using the font-family property.", @@ -696,6 +809,15 @@ "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem h2 Element hinzufügen." ], + "titleRU": "Импортируйте шрифт Google", + "descriptionRU": [ + "Теперь давайте импортируем и применим шрифт Google (обратите внимание, что если Google заблокирован в ваней стране, вам нужно будет пропустить это испытание).", + "Сначала вам понадобится сделать запрос к Google для получения шрифта Lobster и загрузить его в ваш HTML.", + "Скопируйте следующй кусок кода и вставьте его в самый верх вашего редактора кода:", + "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", + "Теперь вы можете установить шрифт Lobster в качестве значения семейства шрифтов для вашего h2.", + "Примените свойство font-family со значением Lobster к вашему элементу h2." + ], "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).", @@ -759,6 +881,14 @@ "Es gibt verschiedene Schriftarten, die jedem Browser standardmäßig zur Verfügung stehen. Das sind unter anderem \"Monospace\", \"Serif\" und \"Sans-Serif\". Probiere deinem h2 Element gleichzeitig die Schriftart \"Lobster\" und als Alternative \"Monospace\" zu geben.", "Jetzt versuche den Aufruf von Google Fonts in deinem HTML auszukommentieren, sodass \"Lobster\" nicht zur Verfügung steht. Beachte, wie nun die Schriftart \"Monospace\" geladen wird." ], + "titleRU": "Укажите порядок деградации шрифтов", + "descriptionRU": [ + "Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них Monospace, Serif и Sans-Serif", + "Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.", + "Например, если бы вы хотели, чтобы элемент использовал шрифт Helvetica, но также деградировал до шрифта Sans-Serif, когда Helvetica недоступен, вы могли бы использовать этот CSS-стиль:", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace." + ], "title": "Specify How Fonts Should Degrade", "description": [ "There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif", @@ -824,6 +954,15 @@ "Ein Beispiel dafür wäre <img src=\"www.bild-quelle.com/bild.jpg\"/>. Beachte, dass img Elemente in den meisten Fällen selbstschließend sind.", "Versuche es mit diesem Bild: https://bit.ly/fcc-relaxing-cat" ], + "titleRU": "Добавьте изображения к вашему сайту", + "descriptionRU": [ + "Вы можете добавлять изображения к вашему сайту с помощью элемента img и указывать ссылки определённых изображений с помощтю атрибута src.", + "Примером добавления мзображения может служить:", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Обратите внимание, что в большинстве случаев элементы img являются самозакрывающимися.", + "Попробуйте добавить изображение используя следующую ссылку:", + "https://bit.ly/fcc-relaxing-cat" + ], "title": "Add Images to your Website", "description": [ "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", @@ -890,6 +1029,14 @@ "Die Breite eines Elements wird mit dem CSS Attribut width kontrolliert. Wie bei Schriftarten verwenden wir Pixel (px) um die Größe zu definieren.", "Wenn wir also die CSS Klasse \"larger-image\" erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir: <style> .larger-image { width: 500px; } </style>" ], + "titleRU": "Установите размер ваших изображений", + "descriptionRU": [ + "В CSS есть свойтсво, называемое width, которе управляет шириной элемента. По аналогии со шрифтами, мы используем px (пиксели) для указания ширины изображения.", + "Например, если бы мы хотели создать CSS-класс larger-image, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.", + "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания." + ], "title": "Size your Images", "description": [ "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", @@ -960,6 +1107,15 @@ "CSS Rahmen haben Attribute wie Style, Color und Width.", "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, würden wir so vorgehen: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>" ], + "titleRU": "Дбавьте границы вокруг ваших элементов", + "descriptionRU": [ + "CSS-границы имеют свойства: style, color и width", + "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Создайте класс thick-green-border, который добавляет зелёную границу шириной в 10 пикселей со стилем solid вокруг HTML-элемента и примените этот класс к вашему фото кота.", + "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:", + "<img class=\"class1 class2\">" + ], "title": "Add Borders Around your Elements", "description": [ "CSS borders have properties like style, color and width", @@ -1030,6 +1186,12 @@ "Das Bild hat nun spitze Ecken. Wir können diese Ecken mit dem CSS Attribut border-radius abrunden.", "Du kannst einen border-radius mit Pixeln deklarieren. Das beeinflusst die Rundung der Ecken. Füge dieses Attribut zu deiner thick-green-border Klasse hinzu und setze es auf 10 Pixel." ], + "titleRU": "Добавьте скруглённые углы с помощью радиуса границы", + "descriptionRU": [ + "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство border-radius.", + "Вы можете указать значения border-radius в пикселях. Присвойте вашему фото кота свойство border-radius со значением 10px.", + "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить border-radius как к классу .thick-green-border, так и к классу .smaller-image." + ], "title": "Add Rounded Corners with a Border Radius", "description": [ "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", @@ -1095,6 +1257,11 @@ "Gib deinem Katzenfoto einen border-radius von 50 %.", "Du kannst einem border-radius neben Pixeln auch Prozentwerte zuweisen." ], + "titleRU": "Сделайте круглые изображения с помощью радиуса границы", + "descriptionRU": [ + "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства border-radius.", + "Присвойте вашему фото кота свойство border-radius со значением 50%." + ], "title": "Make Circular Images with a Border Radius", "description": [ "In addition to pixels, you can also specify a border-radius using a percentage.", @@ -1165,6 +1332,15 @@ "\"Ein", "Hier ist ein Beispiel: <p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" ], + "titleRU": "Присоедините внешние страницы с помощью якорных элементов", + "descriptionRU": [ + "Элементы a, также известные как якорные элементы, применяют для связи с содержимым вне текущей страницы.", + "Вот диаграмма элемента a. В этом случае, элемент a использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.", + "\"a", + "Вот пример:", + "<p>Вот <a href=\"http://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>", + "Создайте элемент a, который присоединяет http://freecatphotoapp.com и имеет значение \"cat photos\" в качестве текста якоря." + ], "title": "Link to External Pages with Anchor Elements", "description": [ "a elements, also known as anchor elements, are used to link to content outside of the current page.", @@ -1243,6 +1419,15 @@ "Hier ist nochmal ein Beispiel für ein a Element: \"Ein", "So könnte es aussehen: <p>Hier ist ein <a href=\"https://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p>" ], + "titleRU": "Создайте вложенный якорный элемент внутри параграфа", + "descriptionRU": [ + "Вот диаграмма элемента a:", + "\"a", + "Вот пример:", + "<p>Вот <a href=\"https://freecodecamp.com\"> ссылка на Free Code Camp</a> для перехода на ресурс.</p>", + "Вложенность значит установку одного элемента внутрь друго элемента.", + "Теперь вложите ваш существующий элемент a внутрь нового элемента p (сразу после существующего элемента h2) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный." + ], "title": "Nest an Anchor Element within a Paragraph", "description": [ "Again, here's a diagram of an a element for your reference:", @@ -1326,6 +1511,12 @@ "Das ist auch nützlich, wenn du die Funktion eines Links mit jQuery verändern willst. Das werden wir noch behandeln.", "Ersetze den Inhalt des href Attributs deines a Elements mit einem Hash Symbol um einen toten Link zu erzeugen." ], + "titleRU": "Создайте мёртвые ссылки используя хэш-символ", + "descriptionRU": [ + "Иногда вам нужно добавить элементы a к вашему сайту до того, как вы знаете куда будут вести ссылки.", + "Также это может оказаться полезно, когда вы меняете поведение ссылки используя jQuery, что мы изучим позже.", + "Замените значение атрибута href вашего элемента a на #, известное как хэш-символ, для превращения элемента в мёртвую ссылку." + ], "title": "Make Dead Links using the Hash Symbol", "description": [ "Sometimes you want to add a elements to your website before you know where they will link.", @@ -1398,6 +1589,14 @@ "Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des href Attributs des a Elements nutzt, um daraus einen toten Link zu machen.", "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link." ], + "titleRU": "Превратите изображение в ссылку", + "descriptionRU": [ + "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов a.", + "Вложите ваше изображение в элемент a. Вот пример:", + "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>", + "Не забывайте использовать # в качестве значения атрибута href вашего элемента a для превращения ссылки в мёртвую.", + "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой." + ], "title": "Turn an Image into a Link", "description": [ "You can make elements into links by nesting them within an a element.", @@ -1477,6 +1676,14 @@ "alt Attribute sind nützlich um Personen – und Web Crawlers wie Google – zu sagen was in einem Foto abgebildet wird. Das ist extrem wichtig, damit blinde oder visuell eingeschränkte Menschen den Inhalt der Website verstehen.", "Du kannst das alt Attribut direkt in das Img Element einfügen: <img src=\"www.bild-quelle.com/bild.jpg\" alt=\"Dein Alt Text.\"/>" ], + "titleRU": "Добавьте альтернативный текст к изображению для улучшения доступа", + "descriptionRU": [ + "Атрибуты alt, также известные как alt text, являются тем, что браузеры отобразят, если изображение загрузить не получится. Атрибуты alt важны для незрячих или пользователей с ограниченными возможностями в области зрения для понимания того, что отображает изображение. Также поисковые системы используют атрибуты alt.", + "Вкратце, каждое изображение должно иметь атрибут alt!", + "Вы можете добавить атрибут alt прямо в элемент img следующим образом:", + "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"ваш альтернативный текст\">", + "Добавьте атрибут alt с текстом A cute orange cat lying on its back к нашему фото кота." + ], "title": "Add Alt Text to an Image for Accessibility", "description": [ "alt attributes, also known as alt text, are what browsers will display if they fail to load the image. alt attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at alt attributes.", @@ -1557,6 +1764,15 @@ "ungeordnete Listen starten mit einem <ul> Element. Dann beinhalten sie eine gewisse Anzahl an <li> Elementen.", "Als Beispiel: <ul><li>Milch</li><li>Käse</li></ul> würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen." ], + "titleRU": "Создайте ненумерованный неупорядоченный список", + "descriptionRU": [ + "В HTML есть специальный элемент для создания неупорядоченного списка, или списка с точками в виде меток элементов.", + "Неупорядоченные списки начинаются с элемента <ul>. Затем они содержат некоторе количество элементов <li>.", + "Например: ", + "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", + "создаст ненумерованный список из \"milk\" и \"cheese\".", + "Удалите последние два элемента p и создайте неупорядоченный список из трёх вещей, которые любят кошки." + ], "title": "Create a Bulleted Unordered List", "description": [ "HTML has a special element for creating unordered lists, or bullet point-style lists.", @@ -1642,6 +1858,15 @@ "Geordnete Listen starten mit einem <ol> Element. Dann enthalten sie eine gewisse Anzahl an <li> Elementen.", "Als beispiel: <ol><li>hydrogen</li><li>Helium</li></ol> würde eine nummerierte Liste aus \"Hydrogen\" und \"Helium\" erstellen." ], + "titleRU": "Создайте упорядоченный список", + "descriptionRU": [ + "В HTML есть специальный элемент для создания упорядоченных списков, или списков с номерами в качестве меток элементов.", + "Упорядоченные списки начинаются с элемента <ol>. Далее они содержат некоторое количество элементов <li>.", + "Например:", + "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", + "создаст нумерованный список из \"Garfield\" и \"Sylvester\".", + "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят." + ], "title": "Create an Ordered List", "description": [ "HTML has a special element for creating ordered lists, or numbered-style lists.", @@ -1731,6 +1956,15 @@ "Eingabefelder sind ein guter Weg, um Daten von Nutzern zu erhalten.", "So kannst du eines erstellen: <input type=\"text\">. Beachte, dass input Elemente selbstschließend sind." ], + "titleRU": "Создайте текстовое поле", + "descriptionRU": [ + "Теперь давайте создадим web-форму.", + "Поля текстового ввода - удобный способ получения данных от пользователя.", + "Вы можете создать текстовое поле следующим образом:", + "<input type=\"text\">", + "Обратите внимание, что элементы input самозакрывающиеся.", + "Создайте элемент input типа text под вашими списками." + ], "title": "Create a Text Field", "description": [ "Now let's create a web form.", @@ -1817,6 +2051,13 @@ "Platzhalter erscheinen in input Feldern, bevor der Nutzer etwas eingibt.", "Du kannst Platzhalter auf folgende Weise erstellen: <input type=\"text\" placeholder=\"Das ist ein Platzhalter.\">" ], + "titleRU": "Добавьте замещающий текст к текстовому полю", + "descriptionRU": [ + "Ваш замещающий текст - это то, что отображается в виде текста внутри input пока пользователь не ввёл туда что-либо.", + "Вы можете создать замещающий текст следующим образом:", + "<input type=\"text\" placeholder=\"это замещающий текст\">", + "Установите значение атрибута placeholder вашего текстового поля input равными \"cat photo URL\"." + ], "title": "Add Placeholder Text to a Text Field", "description": [ "Your placeholder text is what appears in your text input before your user has input anything.", @@ -1902,6 +2143,13 @@ "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein form Element bestimmst.", "Zum Beispiel: <form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"></form>" ], + "titleRU": "Создайте элемент типа форма", + "descriptionRU": [ + "Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента form.", + "Например:", + "<form action=\"/url-куда-вы-хотите-отправить-данные-формы\"></form>", + "Вложите ваше текстовое поле в элемент form. Добавьте атрибут action=\"/submit-cat-photo\" к этому элементу формы." + ], "title": "Create a Form Element", "description": [ "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.", @@ -1987,6 +2235,13 @@ "Lass uns nun eine Schaltfläche zum Senden zu deinem Formlar hinzufügen. Durch einen Klick auf diese Schaltfläche werden die Daten des Formulars an die URL gesendet, welche du in dem action Attribut deines Formulars angegeben hast.", "Hier ist ein Beispiel einer solchen Schaltfläche: <button type=\"submit\">Diese Schaltfläche überträgt die Daten des Formulars.</button>" ], + "titleRU": "Добавьте кнопку отправки к форме", + "descriptionRU": [ + "Давайте добавим кнопку отправки submit к вашей форме. Нажатие на эту кнопку отправит данные из вашей формы по адресу, указанному в атрибуте action вашей формы.", + "Вот пример кнопки отправки:", + "<button type=\"submit\">эта кнопка отправляет данные формы</button>", + "Добавьте кнопку отправки к вашему элементу form с указанием типа submit и \"Submit\" в качестве отображаемого текста." + ], "title": "Add a Submit Button to a Form", "description": [ "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action attribute.", @@ -2075,6 +2330,14 @@ "Du kannst bestimmte Felder eines Formulars als Pflichtfelder deklarieren. Damit ist es deinen Nutzern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.", "Um zum Beispiel ein Textfeld als Pflichtfeld zu deklarieren, kannst du einfach ein \"required\" innerhalb deines input Elements hinzufügen: <input type=\"text\" required>" ], + "titleRU": "Используйте HTML5, чтобы сделать заполнение поля обязательным", + "descriptionRU": [ + "Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.", + "Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово required внутрь вашего элемента input: <input type=\"text\" required>", + "Сделайте ваше текстовое поле input обязательным required для заполнения, чтобы пользователь не мог отправить данные формы без заполнения этого поля.", + "Далее попробуйте отправить данные формы без ввода какого-либо текста. Видите как ваша 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.", @@ -2169,6 +2432,16 @@ "Alle Optionsfelder mit Bezug zueinander sollten das gleiche name Attribut teilen.", "Ein Beispiel eines Optionsfeldes: <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>" ], + "titleRU": "Создайте набор радио-кнопок", + "descriptionRU": [ + "Вы можете использовать радио кнопки для вопросов, которые требуют выбора одного варианта ответа из множества.", + "Радио-кнопки относятся к типу input", + "Каждая из ваших радио-кнопок должна быть вложена внутрь своего собственного элемента label.", + "Все относящиеся друг к другу, формирующие группу, радио-кнопки должны иметь один и тот же атрибут name.", + "Вот пример радио-кнопки:", + "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", + "Добавьте пару радио-кнопок к вашей форме. Одна должна соответствовать варианту indoor, а другая - outdoor." + ], "title": "Create a Set of Radio Buttons", "description": [ "You can use radio buttons for questions where you want the user to only give you one answer.", @@ -2269,6 +2542,16 @@ "Formulare nutzen Kontrollkästchen meistens für Fragen, die mehrerer Antworten bedürfen.", "Als Beispiel: <label><input type=\"checkbox\" name=\"personality\"> liebevoll</label>" ], + "titleRU": "Создайте набор флаговых кнопок", + "descriptionRU": [ + "Обычно формы используют флаги (флаговые кнопки) для вопросов, к которым может относиться несколько вариантов ответов.", + "Флаги относятся к типу input", + "Каждый из ваших флагов должен быть вложен в собственный элемент label.", + "Все относящиеся друг к другу флаги должны иметь одинаковый атрибут name.", + "Вот пример флаговой кнопки:", + "<label><input type=\"checkbox\" name=\"personality\"> Loving</label>", + "Добавьте набор из трёх флаговых кнопок к вашей форме. Каждый флаг должен быть вложен внутрь собственного элемента label. Все три флага должны иметь одинаковый атрибут name, значение которго равно personality." + ], "title": "Create a Set of Checkboxes", "description": [ "Forms commonly use checkboxes for questions that may have more than one answer.", @@ -2366,6 +2649,13 @@ "Das kannst du erreichen, indem beiden das Attribut checked beigefügt wird.", "Um das zu bewerkstelligen, füge einfach \"checked\" innerhalb eines Eingabefeldes hinzu. Als Beispiel: <input type=\"radio\" name=\"test-name\" checked>" ], + "titleRU": "Отметьте радио-кнопки и флаговые кнопки по-умолчанию", + "descriptionRU": [ + "Вы можете установить флаг или радио-кнопку отмеченной по-умолчанию с помощью атрибута checked.", + "Для этого добавьте слово \"checked\" в качестве атрибута элемента input. Например:", + "<input type=\"radio\" name=\"test-name\" checked>", + "Установите первую радио-кнопку и первый флаг из наборов отмеченными по-умолчанию." + ], "title": "Check Radio Buttons and Checkboxes by Default", "description": [ "You can set a checkbox or radio button to be checked by default using the checked attribute.", @@ -2461,6 +2751,14 @@ "Wie jedes andere Element – das sich nicht selbst schließt – kannst du ein div Element mit <div> öffnen und mit </div> wieder schließen.", "Versuche deine öffnende div Auszeichnung überhalb des p Elements von \"Things cats love\" und das schließende div unterhalb der schließenden ol Auszeichnung zu platzieren. Damit befinden sich beide Listen innerhalb eines div" ], + "titleRU": "Вложите множество элементов внутрь одного элемента div", + "descriptionRU": [ + "Элемент div, известный как элемент раздела, является контейнером общего назначения для других элементов.", + "Элемент div возможно наиболее широко используемый HTML элемент из всех возможных. Он полезен для передачи собственных CSS-свойств вниз по дереву элементов, которые он содержит.", + "Как и с любым другим несамозакрывающимся элементом, вы можете открыть элемент div меткой <div> и закрыть на следующей строке меткой </div>.", + "Попробуйте разместить открывающую метку div над вашим элементом p с текстом \"Things cats love\", а закрывающую метку div после закрытия элемента ol, таким образом оба ваших списка оказываются внутри одного элемента div.", + "Вложите ваши списки \"Things cats love\" и \"Things cats hate\" внутрь одного элемента div." + ], "title": "Nest Many Elements within a Single Div Element", "description": [ "The div element, also known as a division element, is a general purpose container for other elements.", @@ -2553,6 +2851,13 @@ "
.green-background {
  background-color: green;
}
", "Create a class called gray-background with the background-color of gray. Assign this class to your div element." ], + "titleRU": "Присвойте цвет фона элементу div", + "descriptionRU": [ + "Вы можете установить цвет фона элемента с помощью свойства background-color.", + "Например, если бы вы хотели установить цвет фона элемента зелёным, вы бы использовали следующий стиль внутри вашего элемента style:", + "
.green-background {
  background-color: green;
}
", + "Создайте класс gray-background со значением свойства background-color равным gray. Назначьте этот класс вашему элементу div." + ], "challengeSeed": [ "", "