diff --git a/challenges/01-front-end-development-certification/bootstrap.json b/challenges/01-front-end-development-certification/bootstrap.json index c8ea98fb5e..858ba22bb6 100644 --- a/challenges/01-front-end-development-certification/bootstrap.json +++ b/challenges/01-front-end-development-certification/bootstrap.json @@ -48,7 +48,7 @@ "", "
Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", @@ -783,9 +783,9 @@ "", "Click here for cat photos.
", "", - "Click here for cat photos.
", "", - "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.",
@@ -129,7 +129,7 @@
"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:",
@@ -188,7 +188,7 @@
"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\".",
@@ -244,7 +244,7 @@
"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.",
@@ -302,7 +302,7 @@
"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 -->
",
@@ -356,14 +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.",
@@ -416,7 +416,7 @@
"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.",
@@ -481,7 +481,7 @@
"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.",
@@ -554,14 +554,14 @@
"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
.",
+ "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>", + "À 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.",
@@ -1066,6 +1066,9 @@
"You can add images to your website by using the img
element, and point to a specific image's URL using the src
attribute.",
"An example of this would be:",
"<img src=\"https://www.your-image-source.com/your-image.jpg\">
",
+ "All img
elements must have an alt
attribute. The text inside an alt
attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
+ "Lets add an alt
attribute to our img
example above:",
+ "<img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up. \">
",
"Note that in most cases, img
elements are self-closing.",
"Try it with this image:",
"https://bit.ly/fcc-relaxing-cat
"
@@ -1094,7 +1097,8 @@
],
"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 src
attribute that points to the kitten image.');"
+ "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a src
attribute that points to the kitten image.');",
+ "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\')[\\s\\w\\.\\,\\!]+?(\\\"|\\')/), 'message: Your image element must have an alt
attribute.');"
],
"type": "waypoint",
"titleEs": "Añade imágenes a tu sitio web",
@@ -1164,7 +1168,7 @@
"",
"Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1251,7 +1255,7 @@ "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1330,7 +1334,7 @@ "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1400,7 +1404,7 @@ "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1485,7 +1489,7 @@ "", "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1577,7 +1581,7 @@ "", "cat photos", "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1662,7 +1666,7 @@ "", "Click here for cat photos.
", "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1708,7 +1712,7 @@ "description": [ "You can make elements into links by nesting them within ana
element.",
"Nest your image within an a
element. Here's an example:",
- "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\"></a>
",
+ "<a href=\"#\"><img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera. \"></a>
",
"Remember to use #
as your a
element's href
property in order to turn it into a dead link.",
"Place the existing image element within an anchor element.",
"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."
@@ -1745,7 +1749,7 @@
"",
"Click here for cat photos.
", "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -1767,91 +1771,6 @@ "titleDe": "Verlinke ein Bild", "challengeType": 0 }, - { - "id": "bad87fee1348bd9aedf08818", - "descriptionPtBR": [ - "Os atributosalt
, também conhecidos como texto alternativo
, serão apresentados caso se por qualquer motivo o navegador não possa mostrar a imagem. Os atributos alt
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 alt
.",
- "Em resumo: Todas as imagem devem ter um atributo alt
!",
- "Você pode adicionar um atributo alt
já no elemento img
assim:",
- "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"seu texto alternativo\">
",
- "Adicione um atributo alt
com o texto A cute orange cat lying on its back
para a nossa foto com o gato."
- ],
- "namePtBR": "Dê Acessibilidade a uma Imagem com Texto Alternativo",
- "descriptionDe": [
- "alt
Attribute – auch alt text
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 alt
Attribut beinhalten!",
- "Du kannst das alt
Attribut direkt in das Img Element einfügen:",
- "<img src=\"www.deine-bild-quelle.com/dein-bild.jpg\" alt=\"dein alt Text\">
",
- "Füge zu unserem Katzen-Bild ein alt
Attribut mit dem Text \"A cute orange cat lying on its back\" hinzu."
- ],
- "titleRU": "Добавьте альтернативный текст к изображению для улучшения доступа",
- "descriptionRU": [
- "Атрибуты alt
, также известные как alt text
, являются тем, что браузеры отобразят, если изображение загрузить не получится. Атрибуты alt
важны для незрячих или пользователей с ограниченными возможностями в области зрения для понимания того, что отображает изображение. Также поисковые системы используют атрибуты alt
.",
- "Вкратце, каждое изображение должно иметь атрибут alt
!",
- "Вы можете добавить атрибут alt
прямо в элемент <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.",
- "In short, every image should have an alt
attribute!",
- "You can add an alt
attribute right in the img element like this:",
- "<img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\">
",
- "Add an alt
attribute with the text A cute orange cat lying on its back
to our cat photo."
- ],
- "challengeSeed": [
- "",
- "",
- "",
- "Click here for cat photos.
", - "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", - "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" - ], - "tests": [ - "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'message: Your image element should have analt
attribute set to A cute orange cat lying on its back
');"
- ],
- "type": "waypoint",
- "titleEs": "Agrega texto alternativo a una imagen para dar Accesibilidad",
- "descriptionEs": [
- "Los atributos alt
también conocidos como texto alternativo
, son lo que se presentarán en caso que el navegador no pueda mostrar la imagen. Los atributos alt
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 alt
. ",
- "En resumen, ¡cada imagen debe tener un atributo alt
!",
- "Puedes agregar un atributo alt
justo en el elemento img
así:",
- "<img src=\"www.fuente-de-tu-imagen.com/tu-imagen.jpg\" alt=\"tu texto alternativo\">
",
- "Añade un atributo alt
con el texto A cute orange cat lying on its back
a nuestra foto del gato."
- ],
- "titleDe": "Füge Alt Text für mehr Barrierefreiheit hinzu",
- "challengeType": 0
- },
{
"id": "bad87fee1348bd9aedf08827",
"descriptionPtBR": [
@@ -1924,7 +1843,7 @@
"",
"Click here for cat photos.
", "", - "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
", "Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
" @@ -2020,7 +1939,7 @@ "", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", "Click here for cat photos.
", "", - "Things cats love:
", @@ -3128,7 +3047,7 @@ "", "Click here for cat photos.
", "", - "Things cats love:
", @@ -3242,7 +3161,7 @@ "", "Click here for cat photos.
", "", - "Things cats love:
", diff --git a/challenges/01-front-end-development-certification/json-apis-and-ajax.json b/challenges/01-front-end-development-certification/json-apis-and-ajax.json index bb14209852..310278e1aa 100644 --- a/challenges/01-front-end-development-certification/json-apis-and-ajax.json +++ b/challenges/01-front-end-development-certification/json-apis-and-ajax.json @@ -289,7 +289,7 @@ "We've seen from the last two lessons that each object in our JSON array contains animageLink
key with a value that is the URL of a cat's image.",
"When we're looping through these objects, let's use this imageLink
property to display this image in an img
element.",
"Here's the code that does this:",
- "html += \"<img src = '\" + val.imageLink + \"'>\";
"
+ "html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";
"
],
"challengeSeed": [
"fccss",
@@ -349,14 +349,14 @@
"Hemos visto en las dos últimas lecciones que cada objeto en nuestro vector JSON contiene una llave imageLink
con un valor que corresponde a la URL de la imagen de un gato.",
"Cuando estamos recorriendo estos objetos, usemos esta propiedad imageLink
para visualizar la imagen en un elemento img
.",
"Aquí está el código que hace esto:",
- "html += \"<img src = '\" + val.imageLink + \"'>\";
"
+ "html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";
"
],
"titlePt": "Apresentar as imagens da fonte de dados",
"descriptionPt": [
"Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave imageLink
com um valor que corresponde a URL da imagem de um gato.",
"Quando estamos percorrendo por estes objetos, usamos a propriedade imageLink
para visualizar a imagem em um elemento img
.",
"Aqui está o código para fazer isso:",
- "html += \"<img src = '\" + val.imageLink + \"'>\";
"
+ "html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";
"
]
},
{
@@ -387,7 +387,7 @@
"",
" html += \"