gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #7685 from FreeCodeCamp/staging

Browse Source 
Release staging
This commit is contained in:
Berkeley Martinez
2016-03-21 12:28:07 -07:00
parent dcff3ca9fc cf9c82ed46
commit 4655c14381
5 changed files with 285 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
seed/challenges/01-front-end-development-certification/basic-bonfires.json
View File

@ -365,25 +365,25 @@
"Remember to use <a href=\"//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
],
"challengeSeed": [
"function repeat(str, num) {",
"function repeatStringNumTimes(str, num) {",
" // repeat after me",
" return str;",
"}",
"",
"repeat(\"abc\", 3);"
"repeatStringNumTimes(\"abc\", 3);"
],
"tests": [
"assert(repeat(\"*\", 3) === \"***\", 'message: <code>repeat(\"*\", 3)</code> should return <code>\"***\"</code>.');",
"assert(repeat(\"abc\", 3) === \"abcabcabc\", 'message: <code>repeat(\"abc\", 3)</code> should return <code>\"abcabcabc\"</code>.');",
"assert(repeat(\"abc\", 4) === \"abcabcabcabc\", 'message: <code>repeat(\"abc\", 4)</code> should return <code>\"abcabcabcabc\"</code>.');",
"assert(repeat(\"abc\", 1) === \"abc\", 'message: <code>repeat(\"abc\", 1)</code> should return <code>\"abc\"</code>.');",
"assert(repeat(\"*\", 8) === \"********\", 'message: <code>repeat(\"*\", 8)</code> should return <code>\"********\"</code>.');",
"assert(repeat(\"abc\", -2) === \"\", 'message: <code>repeat(\"abc\", -2)</code> should return <code>\"\"</code>.');"
"assert(repeatStringNumTimes(\"*\", 3) === \"***\", 'message: <code>repeatStringNumTimes(\"*\", 3)</code> should return <code>\"***\"</code>.');",
"assert(repeatStringNumTimes(\"abc\", 3) === \"abcabcabc\", 'message: <code>repeatStringNumTimes(\"abc\", 3)</code> should return <code>\"abcabcabc\"</code>.');",
"assert(repeatStringNumTimes(\"abc\", 4) === \"abcabcabcabc\", 'message: <code>repeatStringNumTimes(\"abc\", 4)</code> should return <code>\"abcabcabcabc\"</code>.');",
"assert(repeatStringNumTimes(\"abc\", 1) === \"abc\", 'message: <code>repeatStringNumTimes(\"abc\", 1)</code> should return <code>\"abc\"</code>.');",
"assert(repeatStringNumTimes(\"*\", 8) === \"********\", 'message: <code>repeatStringNumTimes(\"*\", 8)</code> should return <code>\"********\"</code>.');",
"assert(repeatStringNumTimes(\"abc\", -2) === \"\", 'message: <code>repeatStringNumTimes(\"abc\", -2)</code> should return <code>\"\"</code>.');"
],
"type": "bonfire",
"isRequired": true,
"solutions": [
"function repeat(str, num) {\n if (num < 0) return '';\n return num === 1 ? str : str + repeat(str, num-1);\n}\n\nrepeat('abc', 3);\n"
"function repeatStringNumTimes(str, num) {\n if (num < 0) return '';\n return num === 1 ? str : str + repeatStringNumTimes(str, num-1);\n}\n\nrepeatStringNumTimes('abc', 3);\n"
],
"MDNlinks": [
"Global String Object"
@ -399,31 +399,31 @@
"id": "ac6993d51946422351508a41",
"title": "Truncate a string",
"description": [
"Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a \"...\" ending.",
"Note that the three dots at the end add to the string length.",
"If the <code>num</code> is less than or equal to 3, then the length of the three dots is not added to the string length.",
"Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a <code>...</code> ending.",
"Note that inserting the three dots to the end will add to the string length.",
"However, if the given maximum string length <code>num</code> is less than or equal to 3, then the addition of the three dots does not add to the string length in determining the truncated string.",
"Remember to use <a href=\"//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
],
"challengeSeed": [
"function truncate(str, num) {",
"function truncateString(str, num) {",
" // Clear out that junk in your trunk",
" return str;",
"}",
"",
"truncate(\"A-tisket a-tasket A green and yellow basket\", 11);"
"truncateString(\"A-tisket a-tasket A green and yellow basket\", 11);"
],
"tests": [
"assert(truncate(\"A-tisket a-tasket A green and yellow basket\", 11) === \"A-tisket...\", 'message: <code>truncate(\"A-tisket a-tasket A green and yellow basket\", 11)</code> should return \"A-tisket...\".');",
"assert(truncate(\"Peter Piper picked a peck of pickled peppers\", 14) === \"Peter Piper...\", 'message: <code>truncate(\"Peter Piper picked a peck of pickled peppers\", 14)</code> should return \"Peter Piper...\".');",
"assert(truncate(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length) === \"A-tisket a-tasket A green and yellow basket\", 'message: <code>truncate(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length)</code> should return \"A-tisket a-tasket A green and yellow basket\".');",
"assert(truncate('A-tisket a-tasket A green and yellow basket', 'A-tisket a-tasket A green and yellow basket'.length + 2) === 'A-tisket a-tasket A green and yellow basket', 'message: <code>truncate(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length + 2)</code> should return \"A-tisket a-tasket A green and yellow basket\".');",
"assert(truncate(\"A-\", 1) === \"A...\", 'message: <code>truncate(\"A-\", 1)</code> should return \"A...\".');",
"assert(truncate(\"Absolutely Longer\", 2) === \"Ab...\", 'message: <code>truncate(\"Absolutely Longer\", 2)</code> should return \"Ab...\".');"
"assert(truncateString(\"A-tisket a-tasket A green and yellow basket\", 11) === \"A-tisket...\", 'message: <code>truncateString(\"A-tisket a-tasket A green and yellow basket\", 11)</code> should return \"A-tisket...\".');",
"assert(truncateString(\"Peter Piper picked a peck of pickled peppers\", 14) === \"Peter Piper...\", 'message: <code>truncateString(\"Peter Piper picked a peck of pickled peppers\", 14)</code> should return \"Peter Piper...\".');",
"assert(truncateString(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length) === \"A-tisket a-tasket A green and yellow basket\", 'message: <code>truncateString(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length)</code> should return \"A-tisket a-tasket A green and yellow basket\".');",
"assert(truncateString('A-tisket a-tasket A green and yellow basket', 'A-tisket a-tasket A green and yellow basket'.length + 2) === 'A-tisket a-tasket A green and yellow basket', 'message: <code>truncateString(\"A-tisket a-tasket A green and yellow basket\", \"A-tisket a-tasket A green and yellow basket\".length + 2)</code> should return \"A-tisket a-tasket A green and yellow basket\".');",
"assert(truncateString(\"A-\", 1) === \"A...\", 'message: <code>truncateString(\"A-\", 1)</code> should return \"A...\".');",
"assert(truncateString(\"Absolutely Longer\", 2) === \"Ab...\", 'message: <code>truncateString(\"Absolutely Longer\", 2)</code> should return \"Ab...\".');"
],
"type": "bonfire",
"isRequired": true,
"solutions": [
"function truncate(str, num) {\n if(str.length > num ) {\n if(num > 3) {\n return str.slice(0, num - 3) + '...';\n } else {\n return str.slice(0,num) + '...';\n }\n } \n return str;\n}"
"function truncateString(str, num) {\n if(str.length > num ) {\n if(num > 3) {\n return str.slice(0, num - 3) + '...';\n } else {\n return str.slice(0,num) + '...';\n }\n } \n return str;\n}"
],
"MDNlinks": [
"String.slice()"
@ -445,25 +445,25 @@
"Remember to use <a href=\"//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
],
"challengeSeed": [
"function chunk(arr, size) {",
"function chunkArrayInGroups(arr, size) {",
" // Break it up.",
" return arr;",
"}",
"",
"chunk([\"a\", \"b\", \"c\", \"d\"], 2);"
"chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2);"
],
"tests": [
"assert.deepEqual(chunk([\"a\", \"b\", \"c\", \"d\"], 2), [[\"a\", \"b\"], [\"c\", \"d\"]], 'message: <code>chunk([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.');",
"assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'message: <code>chunk([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.');",
"assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], 'message: <code>chunk([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.');",
"assert.deepEqual(chunk([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'message: <code>chunk([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.');",
"assert.deepEqual(chunk([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], 'message: <code>chunk([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.');",
"assert.deepEqual(chunk([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], 'message: <code>chunk([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.');"
"assert.deepEqual(chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2), [[\"a\", \"b\"], [\"c\", \"d\"]], 'message: <code>chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.');",
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.');",
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.');",
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.');",
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.');",
"assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.');"
],
"type": "bonfire",
"isRequired": true,
"solutions": [
"function chunk(arr, size) {\n var out = [];\n for (var i = 0; i < arr.length; i+=size) {\n out.push(arr.slice(i,i+size));\n }\n return out;\n}\n\nchunk(['a', 'b', 'c', 'd'], 2);\n"
"function chunkArrayInGroups(arr, size) {\n var out = [];\n for (var i = 0; i < arr.length; i+=size) {\n out.push(arr.slice(i,i+size));\n }\n return out;\n}\n\nchunkArrayInGroups(['a', 'b', 'c', 'd'], 2);\n"
],
"MDNlinks": [
"Array.push()",

4
seed/challenges/01-front-end-development-certification/basic-javascript.json
View File

@ -2532,7 +2532,7 @@
"assert(queue([],1) === 1, 'message: <code>queue([], 1)</code> should return <code>1</code>');",
"assert(queue([2],1) === 2, 'message: <code>queue([2], 1)</code> should return <code>2</code>');",
"assert(queue([5,6,7,8,9],1) === 5, 'message: <code>queue([5,6,7,8,9], 1)</code> should return <code>5</code>');",
"queue(testArr, 10); assert(testArr[4] === 10, 'message: After <code>queue(testArr, 10)</code>, <code>myArr[4]</code> should be <code>10</code>');"
"queue(testArr, 10); assert(testArr[4] === 10, 'message: After <code>queue(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>');"
],
"type": "checkpoint",
"challengeType": 1,
@ -4419,7 +4419,7 @@
"description": [
"As we have seen in earlier examples, JSON objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
"Here is an example of how to access a nested array:",
"<blockquote>var ourPets = { <br> \"cats\": [<br> \"Meowzer\",<br> \"Fluffy\",<br> \"Kit-Cat\"<br> ],<br> \"dogs\": [<br> \"Spot\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br>};<br>ourPets.cats[1]; // \"Fluffy\"<br>ourPets.dogs[0]; // \"Spot\"</blockquote>",
"<blockquote>var ourPets = [<br> {<br> animalType: \"cat\",<br> names: [<br> \"Meowzer\",<br> \"Fluffy\",<br> \"Kit-Cat\"<br> ]<br> },<br> {<br> animalType: \"dog\",<br> names: [<br> \"Spot\",<br> \"Bowser\",<br> \"Frankie\"<br> ]<br> }<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
"<h4>Instructions</h4>",
"Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation."
],

207
seed/challenges/01-front-end-development-certification/bootstrap.json
View File

@ -88,6 +88,16 @@
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/&#62;</code>",
"En este caso, lo hemos agregado a esta página por ti.",
"Para iniciar, debemos anidar todo nuestro HTML en un elemento <code>div</code> con la clase <code>container-fluid</code>."
],
"nameFr": "Un design adaptatif (responsive design) utilisant les conteneurs fluides de Bootstrap",
"descriptionFr": [
"Revenons à notre application de photos de chats. Cette fois-ci, nous allons lui donner un style grâce au renommé framework CSS Bootstrap.",
"Bootstrap saura reconnaître la largeur de notre écran et s'y adapter en redimensionnant les éléments HTML - d'où le nom <code>Responsive Design</code> (design adaptatif).",
"Avec le design responsive, il n'y a pas besoin de créer de version mobile de votre site. Il restera bien sur tous les appareils quelle que soit la taille de leurs écrans.",
"Vous pouvez ajouter Bootstrap à n'importe quelle application simplement en incluant le code suivant en haut de votre HTML:",
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/&#62;</code>",
"Ici, nous l'avons déjà ajouté à la page pour vous dans l'arrière-boutique.",
"Pour commencer, nous devons envelopper nos éléments HTML dans un élément <code>div</code> possédant la classe <code>container-fluid</code>"
]
},
{
@ -170,6 +180,14 @@
"Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo <code>src</code> sea <code>http://bit.ly/fcc-running-cats</code>.",
"Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.",
"Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase <code>img-responsive</code> a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página."
],
"nameFr": "Rendre des images adaptatives aux appareils mobiles",
"descriptionFr": [
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page.",
"D'abord, ajoutez une nouvelle image en dessous de celle qui eiste dejà. Changez l'attribut <code>src</src> en <code>http://bit.ly/fcc-running-cats</code>.",
"Ce serait absolument super si notre image pouvait être exactement de la largeur de l'écran du téléphone.",
"Heureusement, avec Bootstrap, il faut seulement ajouter la classe <code>img-responsive</code> à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page."
]
},
{
@ -250,6 +268,12 @@
"Ahora que estamos usando Bootstrap, podemos centrar nuestro elemento de encabezado para hacerlo verse mejor. Todo lo que necesitamos hacer es agregar la clase <code>text-center</code> a nuestro elemento <code>h2</code>.",
"Recuerda que puedes agregar varias clases a un mismo elemento separando cada una de ellas con un espacio, de esta forma:",
"<code>&#60h2 class=\"red-text text-center\"&#62your text&#60/h2&#62</code>"
],
"nameFr": "Centrer du texte avec Bootstrap",
"descriptionFr": [
"Maintenant que wous utilisons Bootstrap, nous pouvons centrer notre entête pour qu'il ait une meilleure apparence. Nous devons seulement ajouter la classe <code>text-center</code> à notre élément <code>h2</code>.",
"Souvenez vous que vous pouvez utiliser plusieurs classes pour un même élément en les séparant avec un espace, comme ceci:",
"<code>&#60h2 class=\"red-text text-center\"&#62Votre texte&#60/h2&#62</code>"
]
},
{
@ -330,6 +354,11 @@
"descriptionEs": [
"Bootstrap tiene sus propios estilos para elementos <code>button</code>, los cuales se ven mejor que los estilos simples de HTML.",
"Crea un nuevo elemento <code>button</code> debajo de tu foto grande del gatito. Dale la clase <code>btn</code> y el texto \"Like\"."
],
"nameFr": "Créer un bouton avec Bootstrap",
"descriptionFr": [
"Bootstrap possède ses propres styles pour les éléments <code>button</code>, qui sont beaucoup plus beaux que ceux issus du HTML seul.",
"Créez un nouvel élément <code>button</code> en dessous de votre grande photo de chaton. Donnez lui comme classe <code>btn</code> et comme texte \"Like\"."
]
},
{
@ -416,6 +445,14 @@
"<a href=\"//i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/O32cDWE.png\" title=\"Pulsa para agrandar\" alt=\"Un botón \"en línea\" es tan pequeño como el texto que contiene. En esta imagen, está centrado. Debajo de este hay un botón \"a nivel de bloque\", que se estira hasta llenar todo el espacio horizontal.'></a>",
"Ten en cuenta que estos botones todavía necesitan la clase <code>btn</code>.",
"Agrega la clase de Bootstrap <code>btn-block</code> a tu botón Bootstrap."
],
"nameFr": "Créer un bouton bloc Bootstrap",
"descriptionFr": [
"Normalement, vos éléments <code>button</code> sont aussi large que le texte qu'ils contiennent. En les transformants en éléments blocs, vos boutons vont s'ajuster pour remplir l'intégralité de l'espace horizontal de la page et tous les éléments qui le suivront se placeront sur une \"nouvelle ligne\" en dessous du bloc.",
"Cette image illustre la différence entre éléments <code>inline</code> (sans briser la ligne) et éléments <code>block-level</code> (en blocs)",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour agrandir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, il est centré. En dessous de celui-ci il y a un bouton \"block-level\" , qui s'étire et remplit l'espace horizontal.'></a>",
"Notez que ces boutons ont toujours besoin de la classe <code>btn</code>",
"Ajoutez la classe Bootstrap <code>btn-block</code> à votre bouton Bootstrap."
]
},
{
@ -498,6 +535,12 @@
"La clase <code>btn-primary</code> es el color principal que utilizarás en tu aplicación. Es útil resaltar las acciones que quieres que tu usuario ejecute.",
"Agrega la clase <code>btn-primary</code> de Bootstrap a tu botón.",
"Ten en mente que este botón todavía necesita las clases <code>btn</code> y <code>btn-block</code>."
],
"nameFr": "Goutez à l'arc en ciel de couleurs des boutons de Bootstrap",
"descriptionFr": [
"La classe <code>btn-primary</code> est la couleur principale que vous utiliserez dans votre application. Elle est utile pour mettre en valeur les actions que vous voulez faire réaliser par vos utilisateurs.",
"Ajoutez la classe Bootstrap <code>btn-primary</code> à votre bouton.",
"Notez que ce bouton a toujours besoin des classes <code>btn</code> et <code>btn-block</code>"
]
},
{
@ -581,6 +624,12 @@
"Bootstrap incluye varios colores pre-definidos para botones. La clase <code>btn-info</code> se utiliza para llamar la atención a acciones opcionales que el usuario puede tomar.",
"Crea un nuevo botón a nivel de bloque de Bootstrap debajo de tu botón de \"Like\" con el texto \"Info\", y agrégale las clases de Bootstrap <code>btn-info</code> y <code>btn-block</code>.",
"Ten en mente que estos botones todavía necesitan las clases <code>btn</code> y <code>btn-block</code>."
],
"nameFr": "Indiquez les actions optionelles avec des boutons informatifs",
"descriptionFr": [
"Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe <code>btn-info</code> est utilisée pour indiquer des actions optionelles pour vos utilisateurs.",
"Créez un nouveau bouton Bootstrap bloc en dessous de votre bouton \"Like\" avec le texte \"Info\" et donnez lui les classes Bootstrap <code>btn-info</code> et <code>btn-block</code>.",
"Notez que ces boutons ont toujours besoins des classes <code>btn</code> and <code>btn-block</code>."
]
},
{
@ -665,6 +714,13 @@
"Bootstrap incluye varios colores pre-definidos para botones. La clase <code>btn-danger</code> es el color de botón que usarías para notificar a los usuarios que el botón ejecuta una acción destructiva, como por ejemplo eliminar la foto de un gato.",
"Crea un botón con el texto \"Delete\" y dale la clase <code>btn-danger</code>.",
"Recuerda que estos botones todavía requieren las clases <code>btn</codez> y <code>btn-block</code>."
],
"nameFr": "Prévenez vos utilisateurs d'une action dangereuse",
"descriptionFr": [
"Bootstrap est livré avec plusieurs couleurs prédéfinies pour les boutons. La classe <code>btn-danger</code> est utilisée pour indiquer aux utilisateurs que le bouton actionne un processus destructif comme supprimer une photo de chat.",
"Créez un bouton ayant le texte \"Delete\" et donnez lui la classe <code>btn-danger</code>.",
"Notez que ces boutons ont toujours besoins des classes <code>btn</code> and <code>btn-block</code>."
]
},
{
@ -758,6 +814,16 @@
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
"Pon los botones de <code>Like</code>, <code>Info</code> y <code>Delete</code> lado a lado. Esto se hace anidando los tres botones dentro de un elemento <code>&#60;div class=\"row\"&#62;</code>, y luego cada uno de ellos dentro de un elemento <code>&#60;div class=\"col-xs-4\"&#62;</code>.",
"La clase <code>row</code> se aplica al elemento <code>div</code>, dentro del cual van anidados los botones."
],
"nameFr": "Utilisez la grille de Bootstrap pour mettre les éléments côte-à-côte.",
"descriptionFr": [
"Bootstrap utilise un système de grille adaptative, qui rend plus simple le placement des éléments en rangées et la spécification de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être associés à un élément <code>div</code>",
"Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour agrandir\" alt=\"Une image illustrant le système de grille Bootstrap\"></a>",
"Notez que dans cet exemple, nous avons utilisé la classe <code>col-md-*</code>. Ici, <code>md</code> signifie medium, et <code>*</code> donne le nombre de colonnes en largeur de l'élément. Dans le cas présenté, on a défini la largeur en colonnes d' un élément sur un écrand de taille medium, comme un ordinateur portable.",
"Dans l'application de photos de chats que nous sommes en train de construire, nous utiliserons <code>col-xs-*</code>, où <code>xs</code> signifie extrêmement petit (comme un écran de téléphone mobile), et <code>*</code> est le nombre de colonnes en largeur de l'élément.",
"Mettez les boutons <code>Like</code>, <code>info</code> et <code>Delete</code> côte-à-côte en les enveloppant tous dans un élément <code>&#60;div class=\"row\"&#62;</code>, puis chacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
"La classe <code>row</code> est donnée à un <code>div</code>, et les boutons peuvent être insérés à l'intérieur de celui-ci."
]
},
{
@ -856,6 +922,14 @@
"Elimina las declaraciones CSS <code>.red-text</code>, <code>p</code>, y <code>.smaller-image</code> de tu elemento <code>style</code>, de forma que las únicas declaraciones que queden en tu elemento <code>style</code> sean <code>h2</code> y <code>thick-green-border</code>.",
"Luego elimina el elemento <code>p</code> que contiene un enlace nulo. Después, elimina la clase <code>red-text</code> de tu elemento <code>h2</code> y reemplázalo con la clase <code>text-primary</code> de Bootstrap.",
"Por último, elimina la clase \"smaller-image\" de tu primer elemento <code>img</code> y reemplázalo con la clase <code>img-responsive</code>."
],
"nameFr": "Remplacez le CSS personnalisé par les styles Bootstrap",
"descriptionFr": [
"Nous pouvons nettoyer notre code et rendre le look de notre appli Cat Photos plus conventionnel en utilisant les styles intégrés à Bootstrap à la place des styles personnalisés que nous avons créés auparavant.",
"Ne vous inquiétez pas - nous auront beaucoup de temps pour personnaliser notre CSS plus tard.",
"Supprimez les déclarations CSS <code>.red-text</code>, <code>p</code>, et <code>.smaller-image</code> de votre élément <code>style</code> pour que les seules déclarations restantes dans l'élément <code>style</code> soient <code>h2</code> et <code>thick-green-border</code>.",
"Ensuite supprimez l'élément <code>p</code> contenant un lien fantôme. Puis enlevez la classe <code>red-text</code> de votre élément <code>h2</code> et remplacez la par la classe Bootstrap <code>text-primary</code>",
"Enfin, enlevez la classe \"smaller-image\" dde votre premier élément <code>img</code> et remplacez le par la classe <code>img-responsive</code>."
]
},
{
@ -944,6 +1018,16 @@
"Anida la palabra \"love\" en tu elemento \"Things cats love\" dentro de un elemento <code>span</code>. Luego, asigna a ese elemento <code>span</code> la clase <code>text-danger</code> para hacer que el texto sea rojo.",
"Así es como lo harías con el elemento \"Top 3 things cats hate\":",
"<code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate:&#60;/span&#62;&#60;/p&#62;</code>"
],
"nameFr": "Utiliser Spans pour les éléments \"Inline\"",
"descriptionFr": [
"Vous pouvez utiliser les spans pour créer des éléments inline. Vous rappelez vous quand nous avions utilisé la classe <code>btn-block</code> pour remplir la rangée entière?",
"Cette image illustre la différence entre les éléments <code>inline</code> (en ligne) et les éléments <code>block-level</code> (de blocs):",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour élargir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, c'est centré. En dessous il y a un bouton \"block-level\", qui s'étire à tout l'espace horizontal.'></a>",
"En utilisant un élément <code>span</code>, vous pouvez mettre ensemble plusieurs éléments, et même donner un style différent à plusieurs parties d'un même élément",
"Nichez le mot \"love\" dans votre élément \"Things cats love\" en dessous dans un élément <code>span</code>; Ensuite donnez à ce <code>span</code> la classe <code>text-danger</code> pour rendre le texte rouge.",
"Il faudrait que vous fassiez ainsi pour l'élément \"Top 3 things cats hate\":",
"<code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate:&#60;/span&#62;&#60;/p&#62;</code>"
]
},
{
@ -1033,6 +1117,17 @@
"En la aplicación de fotos de gatos que estamos construyendo, usaremos <code>col-xs-*</code>, donde <code>xs</code> significa extra pequeño (como una pantalla extra-pequeña de un teléfono), y <code>*</code> especifica el número de columnas que debe tomar el ancho del elemento.",
"Anida tu primera imagen y tu elemento <code>h2</code> dentro de un solo elemento <code>&#60;div class=\"row\"&#62;</code>. Anida tu texto <code>h2</code> dentro de un <code>&#60;div class=\"col-xs-8\"&#62;</code> y tu imagen en un <code>&#60;div class=\"col-xs-4\"&#62;</code> de tal forma que estén en la misma línea.",
"¿Te diste cuenta de que la imagen es ahora justamente del tamaño apropiado para el texto?"
],
"nameFr": "Créer un entête personalisé",
"descriptionFr": [
"Notice how the image is now just the right size to fit along the text?",
"Nous allons réaliser un entête tout simple pour notre appli Cat Photo App en plaçant le titre et l'image de chat relaxante dans la même rangée.",
"Rappelez-vous, Bootstrap utilise un système de grille adaptative, qui rend facile le placement des éléments en rangées et la définition de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être appliquées à un élément <code>div</code>.",
"Voici un diagramme du fonctionnement de la grille à 12 colonnes de Bootstrap:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour élargir\" alt=\"Une image illlustrant le système de grille de Bootstrap\"></a>",
"Notez que dans cet exemple, on utilise la classe <code>col-md-*</code>. Ici <code>md</code> signifie medium, et <code>*</code> est un nombre spécifiant le nombre de colonnes en largeur que l'élément devrait avoir.",
"Enveloppez votre première image et votre élément <code>h2</code> dans un seul élément <code>&#60;div class=\"row\"&#62;</code>. Mettez l'élément <code>h2</code> dans un <code>&#60;div class=\"col-xs-8\"&#62;</code> et votre image dans un <code>&#60;div class=\"col-xs-4\"&#62;</code> pour qu'ils soient sur la même ligne.",
"Voyez vous comme l'image est maintenant exactement ajustée à la bonne taille pour être à côté du texte?"
]
},
{
@ -1123,6 +1218,16 @@
"El elemento <code>i</code> originalmente era usado para hacer textos en itálicas, pero ahora comunmente se usa para iconos. Le agregas clases de Font Awesome al elemento <code>i</code> para convertirlo en un ícono, por ejemplo:",
"<code>&lt;i class=\"fa fa-info-circle\"&gt;&lt;/i&gt;</code>",
"Usa Font Awesome para agregar un icono de \"pulgar arriba\" <code>thumbs-up</code> a tu botón de like dándole un elemento <code>i</code> con las clases <code>fa</code> y <code>fa-thumbs-up</code>."
],
"nameFr": "Ajouter des icônes Font Awesome à nos boutons",
"descriptionFr": [
"Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format <code>.svg</code>. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.",
"Vous poyvez ajouter Font Awesome à n'importe quell application en ajoutant le code suivant en haut de votre HTML:",
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/&#62;</code>",
"Ici, nous l'avons déjà ajouté pour vous dans le back-office.",
"La balise <code>i</code> eétait utilisé à la base pour mettre les autres éléments en italique, mais maintenant elle est utilisée pour les icones. Vous ajoutez des classes Font Awesome à un élément <code>i</code> pour les les transformer en icones, par exemple:",
"<code>&lt;i class=\"fa fa-info-circle\"&gt;&lt;/i&gt;</code>",
"Utilisez Font Awesome pour ajouter un icone <code>thumbs-up</code> à votre bouton de like en lui donnant un élément <code>i</code> ayant les classes <code>fa</code> et <code>fa-thumbs-up</code>."
]
},
{
@ -1202,6 +1307,11 @@
"descriptionEs": [
"Font Awesome es una librería de iconos muy conveniente. Estos iconos son imágenes vectoriales, almacenadas en formato <code>.svg</code>, y son tratados como si fueran fuentes. Puedes especificar su tamaño usando pixeles, y tomarán el tamaño de fuente de su elemento HTML padre.",
"Utiliza Font Awesome para agregar un icono <code>info-circle</code> a tu botón informativo y un icono <code>trash</code> a tu botón de eliminar."
],
"nameFr": "Ajoutez des icones Font Awesome à tous nos boutons",
"descriptionFr": [
"Font Awesome est une librairie d'icônes très pratique. Ces icones sont des images vectorielles, stockées en format <code>.svg</code>. Ces icônes sont traités exactemeent comme des polices. Vous pouvez choisir leur taille en pixel, et ils prendront la taille de police de leur élémment parent HTML.",
"Utilisez Font Awesome pour ajouter un icone <code>info-circle</code> à votre bouton d'info et un icone <code>trash</code> à votre bouton de suppression."
]
},
{
@ -1281,6 +1391,11 @@
"descriptionEs": [
"¡Puedes utilizar las clases <code>col-xs-*</code> de Bootstrap en elementos <code>form</code> también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.",
"Anida todos los botones de opción dentro de un elemento <code>&#60;div class=\"row\"&#62;</code>. Luego, anida cada uno de ellos dentro de un elemento <code>&#60;div class=\"col-xs-6\"&#62;</code>."
],
"nameFr": "Donnez un style responsive à vos boutons radio",
"descriptionFr": [
"Vous pouvez utiliser la classe Bootstrap <code>col-xs-*</code> sur des éléments <code>form</code>. Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.",
"Nichez tous vous boutons radio dans un élément <code>&#60;div class=\"row\"&#62;</code>. Ensuite, nichezchacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-6\"&#62;</code>"
]
},
{
@ -1367,6 +1482,12 @@
"descriptionEs": [
"¡Puedes utilizar las clases <code>col-xs-*</code> de Bootstrap en elementos <code>form</code> también! De esta forma, nuestros botones de opción estarán igualmente distribuidos en la página, sin importar qué tan ancha es la resolución de la pantalla.",
"Anida todas las casillas de selección en un elemento <code>&#60;div class=\"row\"&#62;</code>. Luego, anida cada una de ellas en un elemento <code>&#60;div class=\"col-xs-4\"&#62;</code>."
],
"nameFr": "Donnez un style responsive à vos checkbox (cases de séléction)",
"descriptionFr": [
"Vous pouvez aussi utiliser la classe Bootstrap <code>col-xs-*</code> sur des éléments <code>form</code>! Comme ça, nos boutons radio serons disposés régulierement dans la page, quelle que soit la largeur de l'écran.",
"You can use Bootstrap's <code>col-xs-*</code> classes on <code>form</code> elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.",
"Nichez toustes vos checkbox dans un élément <code>&#60;div class=\"row\"&#62;</code>. Ensuite nichez chacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-4\"&#62;</code>"
]
},
{
@ -1462,6 +1583,11 @@
"descriptionEs": [
"Puedes agregar el icono <code>fa-paper-plane</code> de Font Awesome incluyendo <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> dentro de tu elemento <code>button</code> de envío.",
"Dale a la entrada de texto de tu formulario la clase <code>form-control</code>. Dale al botón de envío de tu formulario las clases <code>btn btn-primary</code>. También, incluye en ese botón el icono <code>fa-paper-plane</code> de Font Awesome."
],
"nameFr": "Donnez un style similaire au contrôles de formulaires à des zones de texte",
"descriptionFr": [
"Vous pouvez ajouter l'icone Font Awesome <code>fa-paper-plane</code> en ajoutant <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;/i&#62;</code> à l'intérieur de votre <code>button</code> de soumission du formulaire.",
"Donnez aux entrées texte de votre formulaire une classe <code>form-control</code>. Donnez à votre bouton de soumission de formulaire les classes <code>btn btn-primary</code>. Donnez lui aussi un icone Font Awesome <code>fa-paper-plane</code>."
]
},
{
@ -1559,6 +1685,12 @@
"Ahora vamos a poner el elemento <code>input</code> y el elemento <code>button</code> que dice submit de tu formulario en la misma línea. Lo haremos de la misma forma que lo hicimos anteriormente: usando un elemento <code>div</code> con la clase <code>row</code>, y otros elementos <code>div</code> dentro de ese, usando la clase <code>col-xs-*</code>.",
"Anida ambos, el elemento <code>input</code> y el elemento <code>button</code> que dice submit de tu formulario dentro de un <code>div</code> con la clase <code>row</code>. Anida el elemento <code>input</code> de tu formulario dentro de un div con cla clase <code>col-xs-7</code>. Anida el elemento <code>button</code> que dice submit de tu formulario en un elemento <code>div</code> con la clase <code>col-xs-5</code>.",
"¡Este es el último desafío que haremos con nuestra aplicación de fotos de gato por ahora. Esperamos que hayas disfrutado aprender acerca de Font Awesome, Bootstrap y diseño adaptativo!"
],
"nameFr": "Aligner les éléments de formulaire de façon responsive avec Bootstrap",
"descriptionFr": [
"Maintenant mettons sur la même ligne l'élément <code>input</code> et le <code>button</code> de soumission du formulaire. Nous procéderons de la même façon que précedemment: en utilisant un élément <code>div</code> avec la classe <code>row</code>, et un un autre div à l'intérieur qui aura la classe <code>col-xs-*</code>.",
"Nichez à la fois l'<code>input</code> texte de votre formulaire et le <code>button</code> de soumission de formulaire à l'intérieur d'un <code>div</code> avec la classe <code>row</code>. Nichez l'<code>input</code> texte du formulaire dans un div ayant la classe <code>col-xs-7</code>. Nichez votre <code>button</code> de soumission de formulaire dans un div ayant la classe <code>col-xs-5</code>.",
"C'est le dernier challenge qui concerne notre application de photos de chats. Nous espérons que vous avez aimé apprendre Font Awesome, Bootstrap et du design adaptatif!"
]
},
{
@ -1590,6 +1722,13 @@
"Crearemos un área de juego con jQuery, el cual utilizaremos en nuestros desafíos con jQuery.",
"Para empezar, crea un elemento <code>h3</code>, con el texto <code>jQuery Playground</code>.",
"Ponle color a tu elemento <code>h3</code> con la clase <code>text-primary</code> de Bootstrap, y céntrala con la clase <code>text-center</code> de Bootstrap."
],
"nameFr": "Créer un entête Bootstrap",
"descriptionFr": [
"Maintenons, créons queqlque chose à partir de zéro pour pratiquer nos connaissances acquises sur HTML, CSS et Bootstrap.",
"Nous allons construire un terrain de jeu pour jQuery, que nous allons bientôt utiliser dans les challenges jQuery.",
"Pour commencer, créez un élément <code>h3</code>, contenant le texte <code>jQuery Playground</code>.",
"Colorez notre élément <code>h3</code> avec la classe Bootstrap <code>text-primary</code>, et centrez le en utilisant la classe Bootstrap <code>text-center</code>"
]
},
{
@ -1615,6 +1754,11 @@
"descriptionEs": [
"Ahora asegurémonos de que todo el contenido en nuestra página pueda adaptarse a dispositivos móviles.",
"Anida tu elemento <code>h3</code> dentro de un elemento <code>div</code> con la clase <code>container-fluid</code>."
],
"nameFr": "Loger notre page dans un conteneur Bootstrap Fluid Div",
"descriptionFr": [
"Maintenant, assurons nous que tout le contenu de la page est mobile-responsive (adaptatif au téléphones mobiles).",
"Nichons notre element <code>h3</code> à l'intérieur d'un élément <code>div</code> ayant la classe <code>container-fluid</code>."
]
},
{
@ -1643,6 +1787,11 @@
"descriptionEs": [
"Ahora crearemos una fila de Bootstrap con nuestros elementos en línea.",
"Crea un elemento <code>div</code> debajo de la etiqueta <code>h3</code>, con la clase <code>row</code>."
],
"nameFr": "Créer une rangée (row) Bootstrap",
"descriptionFr": [
"Maintenant nous allons créer une rangée (row) Bootstrap pour nos éléments inline.",
"Créez un élément <code>div</code> en dessous de la balise <code>h3</code>, avec une classe <code>row</code>."
]
},
{
@ -1671,6 +1820,11 @@
"descriptionEs": [
"Ahora que tenemos una fila en Bootstrap, vamos a partirla en dos columnas para alojar nuestros elementos.",
"Crea dos elementos <code>div</code> dentro de tu fila, ambos con la clase <code>col-xs-6</code>."
],
"nameFr": "Séparer une rangée Bootstrap",
"descriptionFr": [
"Maintenant que nous avons une rangée Bootstrap, séparons la en deux colonnes pour placer nos éléments.",
"Créez deux éléments <code>div</code>dans votre rangée, chacun ayant la classe <code>col-xs-6</code>."
]
},
{
@ -1704,6 +1858,11 @@
"descriptionEs": [
"Bootstrap tiene una clase llamada <code>well</code> que crea una sensación visual de profundidad para tus columnas.",
"Anida un elemento <code>div</code> con la clase <code>well</code> dentro de cada uno de tus elementos <code>div</code> que tienen la clase <code>col-xs-6</code>."
],
"nameFr": "Créez un \"puit\" (well) Bootstrap",
"descriptionFr": [
"Bootstrap possède une classe appelée <code>well</code> qui peux créer une certaine profondeur pour vos colonnes.",
"Nichez un élément <code>div</code> avec la classe <code>well</code> dans chacun de vos éléments <code>col-xs-6</code> <code>div</code>."
]
},
{
@ -1745,6 +1904,11 @@
"descriptionEs": [
"Ahora estamos a una profundidad de varios elementos <code>div</code> dentro de cada columna de nuestra fila. No iremos más profundo que esto. Ahora podemos agregar nuestros elementos <code>button</code>.",
"Anida tres elementos <code>button</code> dentro de cada uno de tus elementos <code>div</code> que tienen la clase <code>well</code>."
],
"nameFr": "Ajouter des éléments dans un puit Bootstrap",
"descriptionFr": [
"Nous avons maintenant plusieurs niveaux de profondeur d'éléments <code>div</code> dans chaque colonne de notre rangée. Ceci est suffisant pour le moment. Maintenant nous pouvons ajouter nos éléments <code>button</code>.",
"Nichez trois éléments <code>button</code> dans chaque élément <code>well</code> <code>div</code>."
]
},
{
@ -1785,6 +1949,11 @@
"descriptionEs": [
"Bootstrap tiene otra clase de botón llamada <code>btn-default</code>.",
"Aplica las clases <code>btn</code> y <code>btn-default</code> a cada uno de tus elementos <code>button</code>."
],
"nameFr": "Appliquer le style de bouton par défaut de Bootstrap",
"descriptionFr": [
"Bootstrap possède une autre classe de bouton appelée <code>btn-default</code>.",
"Appliquez les deux classes <code>btn</code> et <code>btn-default</code> à chacun de vos éléments <code>button</code>"
]
},
{
@ -1824,6 +1993,11 @@
"descriptionEs": [
"No todas las clases necesitan tener un código CSS correspondiente. A veces creamos clases sólo con el propósito de seleccionar esos elementos más fácilmente usando jQuery.",
"Dale a cada uno de tus elementos <code>button</code> la clase <code>target</code>."
],
"nameFr": "Créez une classe à cibler avec les sélécteurs jQuery",
"descriptionFr": [
"Toutes les classes ne nécéssitent pas d'avoir un code CSS qui leur correspondent. Parfois ous créons des classes dans le seul but de pouvoir sélectionner ces éléments plus facilement en utilisant jQuery.",
"Donnez à chacun de vos éléments <code>button</code> la classe <code>target</code>."
]
},
{
@ -1872,6 +2046,15 @@
"Recuerda que puedes darle a un elemento un id como el siguiente:",
"<code>&#60;div class=\"well\" id=\"center-well\"&#62;</code>",
"Dale al pozo de la izquireda el id <code>left-well</code>. Al pozo de la derecha, dale un id <code>right-well</code>."
],
"nameFr": "Ajouter des attributs ID à vos éléments Bootstrap",
"descriptionFr": [
"Rappelez vous qu'en plus des attributs classes, vous pouvez donnez à chacun de vos éléments un attribut <code>id</code>.",
"Chaque id doit être unique pour un élément donné et utilisé une seule fois par page.",
"Donnons un id unique à chacun de nos éléments <code>div</code> de classe <code>well</code>.",
"Rappelez vous que vous pouvez donner un id à un élément ainsi :",
"<code>&#60;div class=\"well\" id=\"center-well\"&#62;</code>",
"Donnez au puit sur la gauche un id de <code>left-well</code>. Donnez au puit sur la droite un id de <code>right-well</code>."
]
},
{
@ -1918,6 +2101,12 @@
"Para que todo esté más claro, vamos a ponerle a todos nuestros pozos una etiqueta que sea igual a su id.",
"Sobre tu pozo de la izquierda, dentro de su elemento <code>div</code> que tiene la clase <code>col-xs-6</code>, agrega un elemento <code>h4</code> con el texto <code>#left-well</code>.",
"Ahora, sobre tu pozo de la derecha, dentro de su elemento <code>div</code> que tiene la clase <code>col-xs-6</code>, agrega un elemento <code>h4</code> con el texto <code>#right-well</code>."
],
"nameFr": "Donner un nom aux puits Bootstrap",
"descriptionFr": [
"Au nom de la clarté, donnons un nom à nos deux puits en accord avec leur ids",
"Au dessus de votre puit de gauche, à l'intérieur de ses éléments <code>col-xs-6</code> <code>div</code>, ajoutez un élément <code>h4</code> ayant le texte <code>#left-well</code>.",
"Au dessus de votre puit de droite, à l'intérieur de ses éléments <code>col-xs-6</code> <code>div</code>, ajoutez un élément <code>h4</code> ayant le texte <code>#right-well</code>."
]
},
{
@ -1966,6 +2155,12 @@
"También quisiéramos referirnos a cada botón por su id utilizando jQuery.",
"Dale a cada uno de tus botones un id único, comenzando con <code>target1</code> y terminando con <code>target6</code>.",
"Asegúrate que <code>target1</code> a <code>target3</code> queden en <code>#left-well</code>, mientras que <code>target4</code> a <code>target6</code> queden en <code>#right-well</code>."
],
"nameFr": "Donner à chaque élément un ID unique",
"descriptionFr": [
"Nous désirerons aussi pouvoir être capable d'utiliser jQuery pour cibler chaque bouton suivant son id unique.",
"Donnez à chaque bouton un id unique, commençant par <code>target1</code> et finissant par <code>target6</code>.",
"Assurez vous que <code>target1</code> à <code>target3</code> sont dans le <code>#left-well</code>, et que <code>target4</code> à <code>target6</code> sont dans le <code>#right-well</code>."
]
},
{
@ -2012,6 +2207,11 @@
"descriptionEs": [
"De la misma forma en que etiquetamos nuestros pozos, ahora vamos a etiquetar nuestros botones.",
"Dale a cada uno de tus elementos <code>button</code> un texto que corresponda con su <code>id</code>."
],
"nameFr": "Donnez un nom à vos boutons Bootstrap",
"descriptionFr": [
"De la même façon que nous avons donné un nom à nos puits, nous voulons nommer nos boutons.",
"Donnez à chaque élément <code>button</code> un texte qui corresponde à son <code>id</code>."
]
},
{
@ -2060,6 +2260,13 @@
"Vamos a asegurar que cualquier persona sepa que no debe modificar nada en este código directamente.",
"Recuerda que puedes iniciar un comentario usando <code>&#60;!--</code> y terminarlo usando <code>--&#62;</code>",
"Agrega un comentario al inicio de tu código HTML que diga <code>Only change code above this line.</code>"
],
"nameFr": "Utiliser des commentaires pour clarifier son code",
"descriptionFr": [
"Quand nous commencerons à utiliser jQuery, nous modifierons les éléments HTML sans avoir besoin de les changer directement dans le fichier HTML.",
"Assurons nous que tout le monde sache qu'ils ne devraient pas modifier quoi que ce soit dans le code HTML.",
"Rappelez vous que vous pouvez commencer un commentaire avec <code>&#60;!--</code> et le finir avec <code>--&#62;</code>",
"Ajoutez un commentaire en haut de l'HTML qui annonce <code>Only change code above this line.</code> (Changez seulement le code au dessus de cette ligne.)"
]
}
]

86
seed/challenges/01-front-end-development-certification/html5-and-css.json
View File

@ -686,7 +686,7 @@
"Agora, vamos importar e aplicar um estilo de fonte por meio do Google Fonts.",
"Primeiro, faça um <code>chamado</code> ao Google Fonts para poder utilizar a fonte chamada <code>Lobster</code> e carregá-la em seu HTML.",
"Para fazer isso, copie o código abaixo e insira-o na parte superior de seu editor de texto:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"<code>&#60;link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"Agora, estableça <code>Lobster</code> como o valor para font-family em seu elemento <code>h2</code>."
],
"namePtBR": "Importe uma Fonte a Partir do Google Fonts",
@ -694,7 +694,7 @@
"Füge dem <code>h2</code> Element die Schriftart oder <code>font-family</code> \"Lobster\" hinzu.",
"Zuerst musst du Google Fonts in dein HTML einbinden, um auf \"Lobster\" zugreifen zu können.",
"Kopiere den folgenden Code und füge diesen in deinen Editor über dem <code>style</code> Element ein:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"<code>&#60;link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"Jetzt kannst du \"Lobster\" als font-family Attribut zu deinem <code>h2</code> Element hinzufügen."
],
"title": "Import a Google Font",
@ -702,7 +702,7 @@
"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).",
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
"Copy the following code snippet and paste it into the top of your code editor:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"<code>&#60;link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element.",
"Apply the <code>font-family</code> of <code>Lobster</code> to your <code>h2</code> element."
],
@ -734,7 +734,7 @@
"Ahora, importemos y apliquemos un tipo de letra de Google (ten en cuenta que si Google está bloqueado en tu país, deberás saltarte este desafío).",
"Primero, haz un <code>llamado</code> a Google para obtener el tipo de letra <code>Lobster</code> y para cargarlo en tu HTML.",
"Copia la siguiente porción de código y pégala en la parte superior de tu editor de texto:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"<code>&#60;link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"Ahora puedes establecer <code>Lobster</code> como valor de font-family de tu elemento <code>h2</code>.",
"Aplica el tipo de letra (<code>font-family</code>) <code>Lobster</code> a tu elemento <code>h2</code>."
],
@ -769,7 +769,7 @@
"Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -813,7 +813,7 @@
"descriptionPtBR": [
"Você pode adicionar imagens à sua página da internet com o uso do elemento <code>img</code>, e apontar para a URL específica de uma imagem utilizando o atributo <code>src</code>.",
"Um exemplo para isso seria:",
"<code>&#60img src=\"http://www.your-image-source.com/your-image.jpg\"&#62</code>",
"<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
"Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.",
"Agora, tente fazer isso com essa imagem:",
"<code>https://bit.ly/fcc-relaxing-cat</code>"
@ -829,13 +829,13 @@
"description": [
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
"An example of this would be:",
"<code>&#60img src=\"http://www.your-image-source.com/your-image.jpg\"&#62</code>",
"<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
"Note that in most cases, <code>img</code> elements are self-closing.",
"Try it with this image:",
"<code>https://bit.ly/fcc-relaxing-cat</code>"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -865,7 +865,7 @@
"descriptionEs": [
"Puedes agregar imágenes a tu sitio web mediante el uso del elemento <code>img</code>, y apuntar a la URL específica de una imagen utilizando el atributo <code>src</code>.",
"Un ejemplo de esto sería:",
"<code>&#60img src=\"http://www.origen-de-tu-imagen.com/tu-imagen.jpg\"&#62</code>",
"<code>&#60img src=\"https://www.origen-de-tu-imagen.com/tu-imagen.jpg\"&#62</code>",
"Ten en cuenta que en la mayoría de los casos, los elementos <code>img</code> son de cierre automático.",
"Prueba con esta imagen:",
"<code>https://bit.ly/fcc-relaxing-cat</code>"
@ -900,7 +900,7 @@
"<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -971,7 +971,7 @@
"<code>&lt;img class=\"class1 class2\"&gt;</code>"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1038,7 +1038,7 @@
"Note: this waypoint allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or <code>.smaller-image</code> class."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1102,7 +1102,7 @@
"Give your cat photo a <code>border-radius</code> of <code>50%</code>."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1156,7 +1156,7 @@
"Aqui está um diagrama de um elemento <code>a</code>. Neste caso, o elemento <code>a</code> é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como as tags de âncora se compõem com o texto, como na próxima linha\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"Veja um exemplo:",
"<code>&#60;p&#62;Aqui está um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"<code>&#60;p&#62;Aqui está um &#60;a href=\"https://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"."
],
"namePtBR": "Ligue Páginas Externas com o Elemento Âncora",
@ -1164,7 +1164,7 @@
"Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.",
"So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
"<img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
"Hier ist ein Beispiel: <code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>"
"Hier ist ein Beispiel: <code>&#60;p&#62;Hier ist ein &#60;a href=\"https://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>"
],
"title": "Link to External Pages with Anchor Elements",
"description": [
@ -1176,7 +1176,7 @@
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1222,7 +1222,7 @@
"Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a> ",
"He aquí un ejemplo:",
"<code>&#60;p&#62;Aquí está un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"<code>&#60;p&#62;Aquí está un &#60;a href=\"https://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de ancla</code> \"fotos de gatos\"."
],
"titleDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
@ -1234,7 +1234,7 @@
"Outra vez, aqui está um diagrama de um elemento <code>a</code> para você usar como referência.",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como são as tags de âncora com o texto como na linha seguinte\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"Veja um exemplo:",
"<code>&#60;p&#62;Este é um &#60;a href=\"http://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"<code>&#60;p&#62;Este é um &#60;a href=\"https://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
"<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.",
"Agora, aninhe o elemento <code>a</code> existente dentro de um novo elemento <code>p</code> de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum."
],
@ -1242,19 +1242,19 @@
"descriptionDe": [
"Jetzt umschließe dein <code>a</code> Element mit einem <code>p</code> Element und dem Text \"click here for cat photos\". Nur \"cat photos\" soll ein Link ein – der Rest normaler Text.",
"Hier ist nochmal ein Beispiel für ein <code>a</code> Element: <img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
"So könnte es aussehen: <code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>"
"So könnte es aussehen: <code>&#60;p&#62;Hier ist ein &#60;a href=\"https://freecodecamp.com\"&#62; Link zum Free Code Camp&#60;/a&#62; für dich zum Folgen.&#60;/p&#62;</code>"
],
"title": "Nest an Anchor Element within a Paragraph",
"description": [
"Again, here's a diagram of an <code>a</code> element for your reference:",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"Here's an example:",
"<code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
"<code>&#60;p&#62;Here's a &#60;a href=\"https://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
"<code>Nesting</code> just means putting one element inside of another element.",
"Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>h2</code> element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1306,7 +1306,7 @@
"Una vez más, aquí está un diagrama de un elemento <code>a</code> para tu referencia:",
"<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
"He aquí un ejemplo:",
"<code>&#60;p&#62;Aquí hay un &#60;a href=\"http://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"<code>&#60;p&#62;Aquí hay un &#60;a href=\"https://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
"<code>Anidamiento</code> simplemente significa poner un elemento dentro de otro elemento.",
"Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> (justo después del elemento <code>h2</code> que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ."
],
@ -1334,7 +1334,7 @@
"Replace the value of your <code>a</code> element's <code>href</code> attribute with a <code>#</code>, also known as a hash symbol, to turn it into a dead link."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1388,14 +1388,14 @@
"descriptionPtBR": [
"Você pode transformar elementos em links ao aninhá-los com um elemento <code>a</code>.",
"Aninhe sua imagem dentro de um elemento <code>a</code>. Temos aqui um exemplo.",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"Lembre de usar <code>#</code> como atributo <code>href</code> de seu elemento <code>a</code> para tornar o link inativo."
],
"namePtBR": "Transforme uma Imagem em um Link",
"descriptionDe": [
"Umschließe dein <code>img</code> Element mit einem <code>a</code> Element als toten Link.",
"Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
"Umschließe nun dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel: <code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"Umschließe nun dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel: <code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"Vergewissere dich, dass du ein Hash Symbol (#) innerhalb des <code>href</code> Attributs des <code>a</code> 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."
],
@ -1403,12 +1403,12 @@
"description": [
"You can make elements into links by nesting them within an <code>a</code> element.",
"Nest your image within an <code>a</code> element. Here's an example:",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"&#62;&#60;/a&#62;</code>",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"&#62;&#60;/a&#62;</code>",
"Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
"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."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1454,7 +1454,7 @@
"descriptionEs": [
"Puedes convertir elementos en enlaces al anidarlos dentro de un elemento <code>a</code>.",
"Anida tu imagen dentro de un elemento <code>a</code>. He aquí un ejemplo: ",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"http://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
"Recuerda usar <code>#</code> como atributo <code>href</code> de tu elemento <code>a</code> con el fin de convertirlo en un vínculo muerto.",
"Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
],
@ -1487,7 +1487,7 @@
"Add an <code>alt</code> attribute with the text <code>A cute orange cat lying on its back</code> to our cat photo."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1568,7 +1568,7 @@
"Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1653,7 +1653,7 @@
"Create an ordered list of the top 3 things cats hate the most."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1742,7 +1742,7 @@
"Create an <code>input</code> element of type <code>text</code> below your lists."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1826,7 +1826,7 @@
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1911,7 +1911,7 @@
"Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -1996,7 +1996,7 @@
"Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2085,7 +2085,7 @@
"Note: This field does not work in Safari."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2181,7 +2181,7 @@
"Add a pair of radio buttons to your form. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2281,7 +2281,7 @@
"Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2375,7 +2375,7 @@
"Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2471,7 +2471,7 @@
"Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2555,7 +2555,7 @@
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2648,7 +2648,7 @@
"Give your <code>form</code> element the id <code>cat-photo-form</code>."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -2744,7 +2744,7 @@
"Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",

5
seed/challenges/01-front-end-development-certification/object-oriented-and-functional-programming.json
View File

@ -234,13 +234,14 @@
"title": "Make Object Properties Private",
"description": [
"Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
"In the previous challenges, we used the <code>this</code> keyword to reference <code>public properties</code> of the current object.",
"In the <a href='/challenges/make-instances-of-objects-with-a-constructor-function' target='_blank'>previous challenges</a>, we used the <code>this</code> keyword to reference <code>public properties</code> of the current object.",
"We can also create <code>private properties</code> and <code>private methods</code>, which aren't accessible from outside the object.",
"To do this, we create the variable inside the <code>constructor</code> using the <code>var</code> keyword we're familiar with, instead of creating it as a <code>property</code> of <code>this</code>.",
"This is useful for when we need to store information about an object but we want to control how it is used by outside code.",
"For example, what if we want to store the <code>speed</code> our car is traveling at but we only want outside code to be able to modify it by accelerating or decelerating, so the speed changes in a controlled way?",
"In the editor you can see an example of a <code>Car</code> <code>constructor</code> that implements this pattern.",
"Now try it yourself! Modify the <code>Bike</code> <code>constructor</code> to have a <code>private property</code> called <code>gear</code> and two <code>public methods</code> called <code>getGear</code> and <code>setGear</code> to get and set that value."
"Now try it yourself! Modify the <code>Bike</code> <code>constructor</code> to have a <code>private property</code> called <code>gear</code> and two <code>public methods</code> called <code>getGear</code> and <code>setGear</code> to get and set that value.",
"<a href='https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this' target='_blank'>Further explanation on <code>this</code> keyword</a>"
],
"challengeSeed": [
"var Car = function() {",