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 :",
+ "",
+ "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>", + "À l'intérieur de cet élément style, vous pouvez créer des
</style>
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>", + "Prenez note qu'il est important d'avoir les accolades ouvrantes et fermantes (
h2 {color: red;}
</style>
{
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.",