diff --git a/challenges/01-front-end-development-certification/html5-and-css.json b/challenges/01-front-end-development-certification/html5-and-css.json index 44c4e70664d..7989319f49a 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -44,6 +44,20 @@ "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.", "Для прохождения этого испытания измените текст элемента h1 с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"." ], + "titleFR": "Dites bonjour aux éléments HTML", + "descriptionFR": [ + "Bienvenue au premier défi de code de Free Code Camp.", + "Vous pouvez modifier le code dans votre éditeur texte, lequel est disponible dans cette page.", + "Voyez-vous le code dans l'éditeur texte qui dit <h1>Hello</h1>? C'est un élément HTML.", + "La plupart des éléments HTML ont une balise ouvrante et une balise fermante", + "Les balises ouvrantes ont cette apparence :", + "<h1>", + "Les balises fermantes ont cette apparence :", + "</h1>", + "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.", + "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.", + "Pour réussir le test de ce défi, changez le texte de l'élément h1 pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"." + ], "title": "Say Hello to HTML Elements", "description": [ "Welcome to Free Code Camp's first coding challenge.", @@ -108,6 +122,14 @@ "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы h1 часто применяют в качестве главных заголовков, в то время как элементы h2 обычно используют для обозначения позаголовков. Также существуют элементы h3, h4, h5 и h6 для обозначения отдельных секций.", "Добавьте метку h2 с текстом \"CatPhotoApp\" для создания второго HTML элемента под вашим элементом h1 с текстом \"Hello World\"." ], + "titleFR": "Un titre avec l'élément h2", + "descriptionFR": [ + "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :", + "\"Une", + "L'élément h2 que vous entrerez créera un élément h2 sur le site.", + "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments h1 sont souvent utilisés comme titre, tandis que les éléments h2 sont généralement utilisés comme sous-titres. Il existe également les éléments h3, h4, h5 et h6 qui indiquent une nouvelle et différente section.", + "Ajoutez une balise h2 contenant \"CatPhotoApp\" pour créer un second élément HTML sous l'élément h1 contenant \"Hello World\"." + ], "title": "Headline with the h2 Element", "description": [ "Over the next few challenges, we'll build an HTML5 app that will look something like this:", @@ -160,6 +182,13 @@ "<p>Я метка p!</p>", "Создайте элемент p под вашим элементом h2 и присвойте ему текст \"Hello Paragraph\"." ], + "titleFR": "Informez avec l'élément paragraphe", + "descriptionFR": [ + "L'élément p est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",", + "Vous pouvez créer un élément p comme ceci :", + "<p>Je suis une balise p!</p>", + "Créez un élément p sous votre élément h2 et inscrivez-y le texte \"Hello Paragraph\"." + ], "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\".", @@ -209,6 +238,13 @@ "Вы можете начать комментарий с <!-- и закончить его -->", "Раскомментируйте свои элементы h1, h2 и p." ], + "titleFR": "Décommenter du HTML", + "descriptionFR": [ + "Commenter est une façon de laisser des commentaires dans votre code sans affecter le fonctionnement du code.", + "Commenter est aussi un moyen pratique de rendre du code inactif sans devoir le supprimer entièrement.", + "Vous pouvez débuter un commentaire avec <!-- et le terminer avec -->.", + "Décommenter vos éléments h1, h2 et p." + ], "title": "Uncomment HTML", "description": [ "Commenting is a way that you can leave comments within your code without affecting the code itself.", @@ -261,6 +297,12 @@ "Тут вам необходимо завершить комментарий до начала вашего элемента h2.", "Закомментируйте ваши элементы h1 и p, но оставьте ваш элемент h2 раскомментированным." ], + "titleFR": "Commentez du HTML", + "descriptionFR": [ + "Souvenez-vous que pour débuter un commentaire, vous devez utiliser <!-- et que pour le terminer, vous devez utiliser -->.", + "Ici vous devrez terminer le commentaire juste avant que l'élément h2 commence.", + "Commentez les éléments h1 et p, mais laissez l'élément h2 tel quel." + ], "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 -->", @@ -314,7 +356,14 @@ "Текст 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." - ], + ], + "titleFR": "Remplissez les blancs avec du faux-texte", + "descriptionFR": [ + "Les développeurs Web utilisent traditionnellement du lorem ipsum comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.", + "Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16ème siècle et cette tradition se poursuit sur le Web.", + "Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte Kitty ipsum.", + "Remplacez le texte à l'intérieur des éléments p avec ces quelques mots du texte Kitty ipsum : Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." + ], "title": "Fill in the Blank with Placeholder Text", "description": [ "Web developers traditionally use lorem ipsum text as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.", @@ -362,6 +411,12 @@ "Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.", "Удалите ваш h1 элемент, чтобы упростить общий вид." ], + "titleFR": "Supprimer des éléments HTML", + "descriptionFR": [ + "Notre téléphone n'a pas beaucoup d'espace vertical.", + "Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.", + "Supprimez l'élément h1 afin de simplifier l'affichage." + ], "title": "Delete HTML Elements", "description": [ "Our phone doesn't have much vertical space.", @@ -418,6 +473,15 @@ "<h2 style=\"color: blue\">CatPhotoApp</h2>", "Измените стиль вашего элемента h2 таким образом, чтобы текст элемента стал красным." ], + "titleFR": "Changer la couleur du texte", + "descriptionFR": [ + "Changeons maintenant la couleur de quelques-uns de nos textes.", + "Nous pouvons le faire en changeant le style de votre élément h2.", + "Le style responsable de la couleur de texte d'un élément est \"color\".", + "Voici comment changer en bleu la couleur du texte de votre élément h2 :", + "<h2 style=\"color: blue\">CatPhotoApp</h2>", + "Changez le style de votre élément h2 pour que son texte soit de couleur rouge." + ], "title": "Change the Color of Text", "description": [ "Now let's change the color of some of our text.", @@ -486,6 +550,18 @@ "Обратите внимание, что важно наличие открывающих и закрывающих фигурных скобок ({ и }) вокруг стиля каждого элемента. Также вам необходимо убедиться в том, что стиль элемента присвоен внутри элемента style. В завершении, убедитесь, что строка объявления каждого элемента стиля должна заканчиваться точкой с запятой.", "Удалите атрибут стиль вашего элемента h2 и взамен создайте CSS-элемент style. Добавьте необходимый CSS, чтобы все элементы h2 стали синими." ], + "titleFR": "Utiliser les sélecteurs CSS pour styliser des éléments", + "descriptionFR": [ + "Avec CSS, il y a des centaines de propriétés que vous pouvez utliser pour changer l'apparence d'un élément dans votre page.", + "Quand vous avez entré <h2 style=\"color: red\">CatPhotoApp</h2>, vous donniez à cet élément h2 uniquement, un style inline.", + "C'est une des façons d'ajouter un style à un élément, mais une meilleure approche est d'utiliser CSS, acronyme de Cascading Style Sheets.", + "Au sommet de votre code, créez un élément style comme ceci :", + "
<style>
</style>
", + "À l'intérieur de cet élément style, vous pouvez créer des sélecteurs CSS pour tous les éléments h2. Par exemple, si vous voulez que tous les éléments h2 soient en rouge, votre élément style ressemblerait à ceci :", + "
<style>
  h2 {color: red;}
</style>
", + "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes ({ and }) autour de chaque élément de style. Vous devez aussi vous assurer que vos styles se retrouvent entre une balise style ouvrante et fermante. Finalement, assurez-vous d'ajouter un point-virgule â la fin de chacun des styles d'éléments.", + "Supprimez les attributs de styles de votre élément h2 et créez plutôt un élément de style CSS. Ajoutez le CSS nécessaire pour rendre tous vos éléments h2 de couleur bleu." + ], "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.",