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 b3589fed97..30a9bc002e 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 @@ -643,6 +643,18 @@ "Внутри вашего элемента style, замените селектор h2 на .red-text и измените значение цвета с blue на red.", "Присвойте вашему элементу h2 атрибут class со значением 'red-text'." ], + "titleFR": "Utiliser les classes CSS pour styler un élément", + "descriptionFR": [ + "Les classes sont des styles réutilisables qui peuvent être ajoutées à des éléments HTML.", + "Voici un exemple de déclaration de classe CSS :", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", + "Remarquez que nous avons créer une classe CSS nommée blue-text à l'intérieur de notre balise <style>.", + "Vous pouvez appliquer une classe à un élément HTML comme ceci :", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Prenez note que que dans votre élément CSS style, les classes doivent débuter par un point. Dans les déclarations de classes à l'intérieur des éléments HTML, on doit omettre le point du début.", + "À l'intérieur de votre élément style, changez le sélecteur du h2 pour .red-text et changez la couleur, passant de blue à red.", + "Donnez à votre élément h2 l'attribut de classe la valeur de red-text." + ], "title": "Use a CSS Class to Style an Element", "description": [ "Classes are reusable styles that can be added to HTML elements.", @@ -718,6 +730,15 @@ "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Примените класс red-text к вашим элементам h2 и p." ], + "titleFR": "Stylez plusieurs éléments avec une classe CSS", + "descriptionFR": [ + "Souvenez-vous que vous pouvez ajouter des classes aux éléments HTML en utilisant class=\"votre-classe-ici\" à l'intérieur de la balise ouvrante correspondante.", + "Souvenez-vous que les sélecteurs CSS nécessitent un point au début comme ceci :", + "
.blue-text {
  color: blue;
}
", + "Rappelez-vous également que les déclarations de classes n'ont pas de point, comme ceci :", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", + "Appliquez la classe red-text à vos éléments h2 et 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.", @@ -785,6 +806,15 @@ "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания.", "Также, пожалуйста, не добавляйте атрибут класс к вашему новому элементу p." ], + "titleFR": "Changez la taille de police d'un élément", + "descriptionFR": [ + "La taille de police est contrôlée par la propriété CSS font-size, comme ceci :", + "
h1 {
  font-size: 30px;
}
", + "Créez un second élément p après l'élément p existant avec le texte kitty ipsum suivant : Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "À l'intérieur de la même balise <style> qui contiens votre classe .red-text, créez une nouvelle entrée pour les éléments p et paramétrer le font-size à 16 pixels (16px).", + "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi.", + "Également, veuillez ne pas ajouter d'attributs de classe à votre nouvel élément p." + ], "title": "Change the Font Size of an Element", "description": [ "Font size is controlled by the font-size CSS property, like this:", @@ -850,6 +880,13 @@ "
h2 {
  font-family: Sans-serif;
}
", "Присвойте шрифт Monospace всем вашим элементам p." ], + "titleFR": "Paramétrer la famille de police d'un élément", + "descriptionFR": [ + "Vous pouvez paramétrer la police d'un élément en utilisant la propriété font-family.", + "Par exemple, si vous voulez paramétrer la police de votre élément h2 à Sans-serif, vous devez utiliser le CSS suivant :", + "
h2 {
  font-family: Sans-serif;
}
", + "Faites en sorte que tous vos éléments p aient la police Monospace." + ], "title": "Set the Font Family of an Element", "description": [ "You can set an element's font by using the font-family property.", @@ -914,6 +951,14 @@ "Теперь вы можете установить шрифт Lobster в качестве значения семейства шрифтов для вашего h2.", "Примените свойство font-family со значением Lobster к вашему элементу h2." ], + "titleFR": "Importer une police de Google", + "descriptionFR": [ + "Maintenant, importons et appliquons une police de Google (prenez note que si Google est interdit d'accès dans votre pays, vous devrez omettre ce défi).", + "Premièrement, vous devrez faire un appel vers Google pour prendre la police Lobster et la charger dans votre HTML.", + "Copier l'extrait de code suivant et coller le dans le haut de votre éditeur de code :", + "Maintenant vous pouvez paramétrer Lobster comme valeur de police de votre élément h2.", + "Appliquer la valeur Lobster à la font-family de votre élément 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).", @@ -985,6 +1030,14 @@ "
p {
  font-family: Helvetica, Sans-Serif;
}
", "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт Lobster становится недоступен. Обратите внимание как происходит деградация до шрифта Monospace." ], + "titleFR": "Spécifier comment vos polices devraient dégrader", + "descriptionFR": [ + "Il y a plusieurs polices par défaut qui sont disponible dans tous les navigateurs Web. Ceci comprend Monospace, Serif et Sans-Serif.", + "Quand une police n'est pas disponible, vous pouvez demander au navigateur de \"dégrader\" vers une autre police.", + "Par exemple, si vous voulez qu'un élément utilise la police Helvetica, mais également dégrader vers Sans-Serif lorsque la police Helvetica n'est pas disponible, vous pouvez utiliser le style CSS suivant :", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", + "Maintenant, commenter votre appel vers les polices de Google, pour que la police Lobster ne soit pas disponible. Regardez comment la police se dégrade vers 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", @@ -1061,6 +1114,16 @@ "Попробуйте добавить изображение используя следующую ссылку:", "https://bit.ly/fcc-relaxing-cat" ], + "titleFR": "Ajouter des images à votre site Web", + "descriptionFR": [ + "Vous pouvez ajouter des images à votre site Web en utilisant l'élément img et pointer vers une URL d'image spécifique en utilisant l'attribut src.", + "Un exemple de cette procédure serait :", + "<img src=\"https://www.your-image-source.com/your-image.jpg\">", + "Note that in most cases, img elements are self-closing.", + "Prenez note que dans la plupart des cas, les éléments img sont auto-fermants.", + "Essayez avec cette image :", + "https://bit.ly/fcc-relaxing-cat" + ], "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.", @@ -1141,6 +1204,14 @@ "Создайте класс smaller-image и используйте его для изменения размера изображений до 100 пикселей в ширину.", "Внимание
По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания." ], + "titleFR": "Redimensionner vos images", + "descriptionFR": [ + "Le CSS a une propriété nommé width qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons px (pixels) pour déterminer la largeur d'une image.", + "Par exemple, si nous voulons créer une classe CSS nommée larger-image qui donnne aux éléments une largeur de 500 pixels, nous utilisons :", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", + "Créez une classe nommée smaller-image et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.", + "Prenez note
Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi." + ], "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.", @@ -1223,6 +1294,15 @@ "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута class. Например:", "<img class=\"class1 class2\">" ], + "titleFR": "Ajouter des bordures autour de vos éléments", + "descriptionFR": [ + "Les bordures CSS ont des propriétés comme style, color et width", + "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", + "Créer une classe nommée thick-green-border qui ajoute une bordure verte de 10 pixel avec un style solid autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.", + "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut class de l'élément. Par exemple :", + "<img class=\"class1 class2\">" + ], "title": "Add Borders Around your Elements", "description": [ "CSS borders have properties like style, color and width",