2790 lines
122 KiB
JSON
2790 lines
122 KiB
JSON
{
|
||
"name": "Basic HTML5 and CSS",
|
||
"order": 0.002,
|
||
"challenges": [
|
||
{
|
||
"id": "bd7123c8c441eddfaeb5bdef",
|
||
"name": "Waypoint: Say Hello to HTML Elements",
|
||
"dashedName": "waypoint-say-hello-to-html-elements",
|
||
"difficulty": 0.0085,
|
||
"description": [
|
||
"Welcome to Free Code Camp's first coding challenge! Click on the button below for further instructions.",
|
||
"Awesome. Now you can read the rest of this challenge's instructions.",
|
||
"You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
|
||
"Do you see the code in your text editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.",
|
||
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>. Opening tags look like this: <code><h1></code>. Closing tags look like this: <code></h1></code>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.",
|
||
"Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
|
||
"To enable the \"Go to my next challenge\" button on this exercise, change your <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
|
||
],
|
||
"tests": [
|
||
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello</h1>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Saluda a los Elementos HTML",
|
||
"descriptionEs": [
|
||
"¡Bienvenido/a al primer desafío de programación de Free Code Camp! Haz click en el botón de abajo para tener más instrucciones.",
|
||
"Genial. Ahora puedes leer el resto de las instrucciones de este desafío.",
|
||
"Puedes editar tu <code>código</code> en tu <code>editor de texto</code>, que hemos incrustado en esta página web.",
|
||
"¿Ves el código en tu editor de texto que dice <code><h1>Hello</h1></code>? Ese es un <code>elemento</code> HTML.",
|
||
"La mayoría de los elementos HTML tienen una <code>etiqueta de apertura</code> y una <code>etiqueta de cierre</code>. Las etiquetas de apertura se ven como: <code><h1></code>. Las etiquetas de cierre se ven como: <code></h1></code>. Fíjate que la única diferencia entre las etiquetas de apertura y de cierre es que estas últimas tienen un / después de su signo de apertura (<).",
|
||
"Una vez que hayas completado cada desafío, y que hayas pasado todas sus pruebas, el botón \"Ir a mi siguiente desafío\" se activará. Haz click en él - o presiona control y enter al mismo tiempo - para avanzar al siguiente desafío.",
|
||
"Para activar el botón \"Ir a mi siguiente desafío\" de este ejercicio, cambia tu texto de la etiqueta <code>h1</code> para que diga \"Hello World\" en lugar de \"Hello\"."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf0887a",
|
||
"name": "Waypoint: Headline with the h2 Element",
|
||
"dashedName": "waypoint-headline-with-the-h2-element",
|
||
"difficulty": 0.010,
|
||
"description": [
|
||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element.",
|
||
"The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
|
||
"This element tells the browser how to render the text that it contains.",
|
||
"<code>h2</code> elements are slightly smaller than <code>h1</code> elements. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements."
|
||
],
|
||
"tests": [
|
||
"assert(($('h2').length > 0), 'Create an <code>h2</code> element.')",
|
||
"assert(editor.match(/<\\/h2>/g) && editor.match(/<\\/h2>/g).length === editor.match(/<h2>/g).length, 'Make sure your <code>h2</code> element has a closing tag.')",
|
||
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your <code>h2</code> element should have the text \"CatPhotoApp\".')",
|
||
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello World</h1>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Encabezado con el elemento h2",
|
||
"descriptionEs": [
|
||
"Agrega una etiqueta <code>h2</code> que diga \"CatPhotoApp\" para crear un segundo <code>elemento</code> HTML debajo de tu elemento <code>h1</code> \"Hello World\".",
|
||
"El elemento h2 que ingreses creará un elemento h2 en el sitio web.",
|
||
"Este elemento le dice al navegador cómo mostrar el texto que contiene.",
|
||
"Los elementos <code>h2</code> son ligeramente más pequeños que los elementos <code>h1</code>. También hay elementos <code>h3</code>, <code>h4</code>, <code>h5</code> y <code>h6</code>."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08801",
|
||
"name": "Waypoint: Inform with the Paragraph Element",
|
||
"dashedName": "waypoint-inform-with-the-paragraph-element",
|
||
"difficulty": 0.011,
|
||
"description": [
|
||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\".",
|
||
"<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
|
||
"You can create a <code>p</code> element like so: <code><p>I'm a p tag!</p></code>."
|
||
],
|
||
"tests": [
|
||
"assert(($('p').length > 0), 'Create a <code>p</code> element.')",
|
||
"assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".')",
|
||
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure your <code>p</code> element has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello World</h1>",
|
||
"<h2>CatPhotoApp</h2>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Informa con el Elemento Párrafo",
|
||
"descriptionEs": [
|
||
"Crea un elemento párrafo debajo de tu elemento h2, y dale el texto \"Hello Paragraph\". Apenas escribas la etiqueta de apertura <code><p></code>, una de nuestras pruebas pasarán (ya que ésta es HTML válido). Asegúrate de cerrar el elemento agregando la etiqueta de cierre <code></p></code>.",
|
||
"Los elementos párrafo son los principales elementos para los párrafos de texto en tamaño normal en sitios web.",
|
||
"Tú puedes crear un elemento párrafo como éste: <code><p>I'm a p tag!</p></code>."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aeaf08801",
|
||
"name": "Waypoint: Visually Separate Elements with Line Breaks",
|
||
"dashedName": "waypoint-visually-separate-elements-with-line-breaks",
|
||
"difficulty": 0.012,
|
||
"description": [
|
||
"Add a <code>br</code> element to your page, preferably between two of your elements.",
|
||
"<code>br</code> elements, also known as \"line break\" elements, can be created with <code><br></code>.",
|
||
"Note that <code><br></code> has no closing tag. It is a \"self-closing\" element.",
|
||
"You'll encounter other self-closing element tags soon."
|
||
],
|
||
"tests": [
|
||
"assert(($('br').length > 0), 'Add a <code>br</code> element to your page preferably between two of your elements.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello World</h1>",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"<p>Hello Paragraph</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Separa Elementos Visualmente con Saltos de Línea",
|
||
"descriptionEs": [
|
||
"Agrega un <code>salto de línea</code> entre los elementos <code><h2></code> y <code><p></code>.",
|
||
"Puedes crear un elemento de salto de línea con <code><br/></code>.",
|
||
"Fíjate que <code><br/></code> no tiene etiqueta de cierre. Es un elemento <code>auto-cerrado</code>. ¿Ves cómo un / precede el signo de cierre (>)?",
|
||
"Luego te encontrarás con otras etiquetas de elementos <code>auto-cerrados</code>."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08802",
|
||
"name": "Waypoint: Uncomment HTML",
|
||
"dashedName": "waypoint-uncomment-html",
|
||
"difficulty": 0.013,
|
||
"description": [
|
||
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.",
|
||
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
|
||
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
|
||
"You can start a comment with <code><!--</code> and end a comment with <code>--></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('h1').length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.')",
|
||
"assert($('h2').length > 0, 'Make your <code>h2</code> element visible on your page by uncommenting it.')",
|
||
"assert($('p').length > 0, 'Make your <code>p</code> element visible on your page by uncommenting it.')",
|
||
"assert(!new RegExp('-->', 'gi').test(editor), 'Be sure to delete the <code>--></code> that ends the comment.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<!--",
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<br>",
|
||
"",
|
||
"<p>Hello Paragraph</p>",
|
||
"-->"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Quitar comentarios HTML",
|
||
"descriptionEs": [
|
||
"Quitar el comentario a los elementos <code>h1</code>, <code>h2</code> y <code>p</code>.",
|
||
"Crear comentarios es una forma en la que puedes dejar mensajes dentro de tu código sin afectar el resultado.",
|
||
"Agregar comentarios es también una forma conveniente de desactivar tu código sin tener que borrarlo por completo.",
|
||
"Puedes comenzar un comentario con <code><!--</code> y terminar de comentar con <code>--></code>."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08804",
|
||
"name": "Waypoint: Comment out HTML",
|
||
"dashedName": "waypoint-comment-out-html",
|
||
"difficulty": 0.014,
|
||
"description": [
|
||
"Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented.",
|
||
"Remember that in order to start a comment, you need to use <code><!--</code> and to end a comment, you need to use <code>--></code>.",
|
||
"Here you'll need to end the comment before your <code>h2</code> element begins."
|
||
],
|
||
"tests": [
|
||
"assert(($('h1').length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.')",
|
||
"assert(($('h2').length > 0), 'Leave your <code>h2</code> element uncommented so that it is visible on your page.')",
|
||
"assert(($('p').length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.')",
|
||
"assert(editor.match(/-->/g).length > 1, 'Be sure to close each of your comments with <code>--></code>.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<!--",
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<br>",
|
||
"",
|
||
"<p>Hello Paragraph</p>",
|
||
"-->"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Comenta en HTML",
|
||
"descriptionEs": [
|
||
"Comenta el elemento <code>h1</code> y el elemento <code>p</code>, pero deja sin comentar el elemento <code>h2</code>.",
|
||
"Recuerda que para comenzar un comentario, necesitas usar <code><!--</code> y para terminar un comentario, necesitas usar <code>--></code>.",
|
||
"Aquí necesitarás terminar el comentario antes que comience el elemento h2."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08833",
|
||
"name": "Waypoint: Fill in the Blank with Placeholder Text",
|
||
"dashedName": "waypoint-fill-in-the-blank-with-placeholder-text",
|
||
"difficulty": 0.015,
|
||
"description": [
|
||
"Replace the text inside your <code>p</code> element with the first few words of the provided \"Kitty Ipsum\" text.",
|
||
"Web developers traditionally use \"Lorem Ipsum\" text as placeholder text. It's called \"Lorem Ipsum\" text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
|
||
"\"Lorem Ipsum\" text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
|
||
"Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called \"Kitty Ipsum\"!",
|
||
"Here are the first few words of \"Kitty Ipsum\" text, which you can copy and paste into the right position: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||
],
|
||
"tests": [
|
||
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided \"Kitty Ipsum\" text.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<br>",
|
||
"",
|
||
"<p>Hello Paragraph</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Llena espacios con texto de relleno",
|
||
"descriptionEs": [
|
||
"Cambia el texto en el elemento <code>p</code> para usar las primeras palabras del texto <code>Kitty Ipsum</code>.",
|
||
"Los desarrolladores web tradicionalmente usan <code>Lorem Ipsum</code> como texto de relleno. Se llama texto Lorem Ipsum porque esas son las primeras dos palabras de una cita famosa de Cicerón de la Roma Antigua.",
|
||
"El texto Lorem Ipsum ha sido usado como texto de relleno en las imprentas desde el siglo 16, y esta tradición continúa en la web.",
|
||
"Bueno, 5 siglos es bastante. Ya que estamos construyendo una aplicación de fotos de gatos (CatPhotoApp), ¡usemos algo llamado <a href='http://kittyipsum.com/'>Kitty Ipsum</a>!",
|
||
"Aquí están las primeras palabras del texto Kitty Ipsum, que puedes copiar y pegar en la posición correcta: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fed1348bd9aedf08833",
|
||
"name": "Waypoint: Delete HTML Elements",
|
||
"dashedName": "waypoint-delete-html-elements",
|
||
"difficulty": 0.016,
|
||
"description": [
|
||
"Delete your <code>h1</code> and <code>br</code> elements so we can simplify our view.",
|
||
"Our phone doesn't have much vertical space.",
|
||
"Let's remove the unnecessary elements so we can start building our CatPhotoApp."
|
||
],
|
||
"tests": [
|
||
"assert(($('h1').length == 0), 'Delete your <code>h1</code> element.')",
|
||
"assert(($('h2').length > 0), 'Leave your <code>h2</code> element on the page.')",
|
||
"assert(($('br').length == 0), 'Delete your <code>br</code> element.')",
|
||
"assert(($('p').length > 0), 'Leave your <code>p</code> element on the page.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h1>Hello World</h1>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<br>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Borra elementos HTML",
|
||
"descriptionEs": [
|
||
"Borra los elementos h1 y br para simplificar nuestra vista.",
|
||
"Nuestro teléfono no tiene mucho espacio para elementos HTML.",
|
||
"Removamos los elementos innecesarios para que empecemos a construir nuestra CatPhotoApp."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08803",
|
||
"name": "Waypoint: Change the Color of Text",
|
||
"dashedName": "waypoint-change-the-color-of-text",
|
||
"difficulty": 0.017,
|
||
"description": [
|
||
"Change your <code>h2</code> element's style so that its text color is red.",
|
||
"We can do this by changing the \"style\" of your <code>h2</code> element.",
|
||
"The style that is responsible for the color of an element's text is the \"color\" style.",
|
||
"Here's how you would set your <code>h2</code> element's text color to blue: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Cambia el color del texto",
|
||
"descriptionEs": [
|
||
"Cambia el estilo del elemento <code>h2</code> de manera que el color de su texto sea rojo.",
|
||
"Podemos hacer esto por medio de cambiar el <code>estilo</code> del elemento <code>h2</code>.",
|
||
"El estilo responsable del color de texto de un elemento es el estilo \"color\".",
|
||
"Así es como podrías volver el color de texto de tu elemento <code>h2</code> en azul: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08805",
|
||
"name": "Waypoint: Use CSS Selectors to Style Elements",
|
||
"dashedName": "waypoint-use-css-selectors-to-style-elements",
|
||
"difficulty": 0.018,
|
||
"description": [
|
||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
|
||
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
|
||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an \"inline style\".",
|
||
"That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).",
|
||
"At the top of your code, create a <code>style</code> element like this: <code><style></style></code>.",
|
||
"Inside that style element, you can create a \"CSS selector\" for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code><style>h2 {color: red;}</style></code>.",
|
||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of your element's styles."
|
||
],
|
||
"tests": [
|
||
"assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your <code>h2</code> element should be blue.')",
|
||
"assert(!$('h2').attr('style'), 'Remove the style attribute from your <code>h2</code> element.')",
|
||
"assert(($('style').length > 1), 'Create a <code>style</code> element.')",
|
||
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/<style>/g).length, 'Make sure each of your <code>style</code> elements has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<h2 style='color: red'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "Waypoint: Usa selectores CSS para dar estilo a los elementos",
|
||
"descriptionEs": [
|
||
"Borra el atributo <code>style</code> de tu elemento <code>h2</code> y escribe el CSS para hacer todos los elementos <code>h2</code> de color azul.",
|
||
"Con CSS, hay cientos de <code>atributos CSS</code> que puedes usar para cambiar como un elemento se ve en una página web.",
|
||
"Cuando entraste <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, le estuviste dando a ese elemento h2 en particular un <code>estilo en línea</code>.",
|
||
"Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando <code>Hojas de Estilo en Cascada (Cascading Style Sheets, CSS)</code>.",
|
||
"Al principio de tu código, crea una <code>etiqueta style</code> como ésta: <code><style></style></code>.",
|
||
"Dentro de ese elemento style, puedes crear un <code>selector css</code> para todos los elementos <code>h2</code>. Por ejemplo, si querías que todos los elementos <code>h2</code> sean rojos, tu elemento style se vería así: <code><style>h2 {color: red;}</style></code>.",
|
||
"Fíjate que es importante tener <code>llaves de apertura y de cierre</code> (<code>{</code> y <code>}</code>) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento está entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento."
|
||
],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aecf08806",
|
||
"name": "Waypoint: Use a CSS Class to Style an Element",
|
||
"dashedName": "waypoint-use-a-css-class-to-style-an-element",
|
||
"difficulty": 0.019,
|
||
"description": [
|
||
"Create a CSS class called \"red-text\" and apply it to your <code>h2</code> element.",
|
||
"Classes are reusable styles that can be added to HTML elements.",
|
||
"Here's the anatomy of a CSS class:",
|
||
"<img class='img-responsive' alt='a diagram of how style tags are composed, which is also described in detail on the following lines.' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>",
|
||
"You can see that we've created a CSS class called \"blue-text\" within the <code><style></code> tag.",
|
||
"You can apply a class to an HTML element like this: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>.",
|
||
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
|
||
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for \".red-text\"."
|
||
],
|
||
"tests": [
|
||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')",
|
||
"assert($('h2').hasClass('red-text'), 'Your <code>h2</code> element should have the class \"red-text\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" h2 {",
|
||
" color: blue;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aefe08806",
|
||
"name": "Waypoint: Style Multiple Elements with a CSS Class",
|
||
"dashedName": "waypoint－style－multiple-elements-with-a-css-class",
|
||
"difficulty": 0.020,
|
||
"description": [
|
||
"Apply the \"red-text\" class to your <code>h2</code> and <code>p</code> elements.",
|
||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||
"Remember that CSS selectors require a period at the beginning like this: <code>.blue-text { color: blue; }</code>, but that class declarations don't use a period, like this: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')",
|
||
"assert($('h2').hasClass('red-text'), 'Your <code>h2</code> element should have the class \"red-text\".')",
|
||
"assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your <code>p</code> element should be red.')",
|
||
"assert($('p').hasClass('red-text'), 'Your <code>p</code> element should have the class \"red-text\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08806",
|
||
"name": "Waypoint: Change the Font Size of an Element",
|
||
"dashedName": "waypoint-change-the-font-size-of-an-element",
|
||
"difficulty": 0.021,
|
||
"description": [
|
||
"Create a second <code>p</code> element. Then, inside your <code><style></code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
|
||
"Font size is controlled by the \"font-size\" CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||
"First, create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your \"red-text\" class."
|
||
],
|
||
"tests": [
|
||
"assert($('p').length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')",
|
||
"assert(editor.match(/<\\/p>/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
|
||
"assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided additional \"Kitty Ipsum\" text.')",
|
||
"assert($('p').css('font-size') === '16px', 'Give your <code>p</code> elements the font-size of 16px.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08807",
|
||
"name": "Waypoint: Set the Font Family of an Element",
|
||
"dashedName": "waypoint-set-the-font-family-of-an-element",
|
||
"difficulty": 0.022,
|
||
"description": [
|
||
"Make all of your <code>p</code> elements use the \"Monospace\" font.",
|
||
"You can set an element's font by using the \"font-family\" attribute.",
|
||
"For example, if you wanted to set your <code>h2</code> element's font to \"Sans-serif\", you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
|
||
],
|
||
"tests": [
|
||
"assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> elements should use the font \"Monospace\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08807",
|
||
"name": "Waypoint: Import a Google Font",
|
||
"dashedName": "waypoint-import-a-google-font",
|
||
"difficulty": 0.023,
|
||
"description": [
|
||
"Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.",
|
||
"First, you'll need to make a \"call\" to Google to grab the \"Lobster\" font and load it into your HTML.",
|
||
"Copy the following code snippet and paste it into your code editor:",
|
||
"<code><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'></code>.",
|
||
"Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element."
|
||
],
|
||
"tests": [
|
||
"assert(new RegExp('googleapis', 'gi').test(editor), 'Import the \"Lobster\" font.')",
|
||
"assert($('h2').css('font-family').match(/lobster/i), 'Your <code>h2</code> element should use the font \"Lobster\".')",
|
||
"assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> element should still use the font \"Monospace\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08808",
|
||
"name": "Waypoint: Specify How Fonts Should Degrade",
|
||
"dashedName": "waypoint-specify-how-fonts-should-degrade",
|
||
"difficulty": 0.024,
|
||
"description": [
|
||
"Make all your <code>h2</code> elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.",
|
||
"You can leave \"Lobster\" your <code>h2</code> element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.",
|
||
"For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could use this CSS style: <code>p { font-family: Helvetica, Sans-Serif; }</code>.",
|
||
"There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set your <code>h2</code> elements to use \"Lobster\" and degrade to \"Monospace\".",
|
||
"Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font."
|
||
],
|
||
"tests": [
|
||
"assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')",
|
||
"assert($('h2').css('font-family').match(/monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08809",
|
||
"name": "Waypoint: Override Styles with Important",
|
||
"dashedName": "waypoint-override-styles-with-important",
|
||
"difficulty": 0.025,
|
||
"description": [
|
||
"Create an \"urgently-red\" class that gives an element the font-color of red, but add <code>!important</code> to the class to ensure the element is rendered as being red. Immediately below your \"urgently-red\" class declaration, create a \"blue-text\" class that gives an element the font-color of blue. Apply both classes to your <code>h2</code> element.",
|
||
"You can add more than one class to an element by separating the class declarations with a space, like this: <code><h2 class='green-text giant-text'>This will be giant green text</h2></code>.",
|
||
"Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.",
|
||
"If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.",
|
||
"There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use <code>!important</code>.",
|
||
"In case you're curious, this is the priority hierarchy for element styles: <code>!important</code> beats inline styles, which beats CSS class selectors, which beats CSS selector. That is, <code>!important</code> trumps all other styles, and inline styles trump style tag declarations.",
|
||
"Here's an example of a CSS style that uses <code>!important</code>: <code><style> .urgently-blue { color: blue !important; } </style></code>.",
|
||
"Now see if you can make sure the <code>h2</code> element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, and without changing the sequence of CSS class declarations."
|
||
],
|
||
"tests": [
|
||
"assert(new RegExp('\\.blue-text', 'gi').test(editor), 'Create the CSS class \"blue-text\"')",
|
||
"assert(new RegExp('\\.urgently-red', 'gi').test(editor), 'Create the CSS class \"urgently-red\"')",
|
||
"assert(new RegExp('red.?!important', 'gi').test(editor), 'Add the \"!important\" declaration!')",
|
||
"assert($('h2').hasClass('blue-text'), 'Your h2 element should have the class \"blue-text\".')",
|
||
"assert($('h2').hasClass('urgently-red'), 'Your h2 element should have the class \"urgently-red\".')",
|
||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08812",
|
||
"name": "Waypoint: Add Images to your Website",
|
||
"dashedName": "waypoint-add-images-to-your-website",
|
||
"difficulty": 0.026,
|
||
"description": [
|
||
"Use an <code>img</code> element to add the image <code>http://bit.ly/fcc-kittens</code> to your website.",
|
||
"You can add images to your website by using the <code>img</code> element, and point to an specific image's URL using the <code>src</code> attribute.",
|
||
"An example of this would be <code><img src=\"www.your-image-source.com/your-image.jpg\"/></code>. Note that in most cases, <code>img</code> elements are self-closing.",
|
||
"Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
|
||
],
|
||
"tests": [
|
||
"assert($('img').length > 0, 'Your page should have an image element.')",
|
||
"assert($('img').filter(function(index) { return /http:\\/\\/bit\\.ly\\/fcc-kittens/gi.test($('img').attr('src')); }).length > 0, 'Your image should have have a <code>src</code> attribute that points to the kitten image.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9acdf08812",
|
||
"name": "Waypoint: Size your Images",
|
||
"dashedName": "waypoint-size-your-images",
|
||
"difficulty": 0.027,
|
||
"description": [
|
||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
|
||
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the image's width.",
|
||
"For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
|
||
"assert($('img').width() === 100, 'Your image should be 100 pixels wide.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<img src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9bedf08813",
|
||
"name": "Waypoint: Add Borders Around your Elements",
|
||
"dashedName": "waypoint-add-borders-around-your-elements",
|
||
"difficulty": 0.028,
|
||
"description": [
|
||
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo.",
|
||
"CSS borders have attributes like style, color and width.",
|
||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
|
||
"assert($('img').hasClass('thick-green-border'), 'Your <code>img</code> element should have the class \"thick-green-border\".')",
|
||
"assert($('img').hasClass('thick-green-border') && parseInt($('img').css('border-top-width')), 'Give your image a border width of 10px.')",
|
||
"assert(new RegExp('solid', 'gi').test(editor), 'Give your image a border style of \"solid\".')",
|
||
"assert($('img').css('border-left-color') === 'rgb(0, 128, 0)', 'Your <code>img</code> element should be green.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<img class='smaller-image' src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08814",
|
||
"name": "Waypoint: Add Rounded Corners with a Border Radius",
|
||
"dashedName": "waypoint-add-rounded-corners-with-a-border-radius",
|
||
"difficulty": 0.029,
|
||
"description": [
|
||
"Give your cat photo a <code>border-radius</code> of 10 pixels.",
|
||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
|
||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to 10 pixels."
|
||
],
|
||
"tests": [
|
||
"assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')",
|
||
"assert(parseInt($('img').css('border-top-left-radius')) > 8, 'Your image should have a border radius of 10 pixels')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08815",
|
||
"name": "Waypoint: Make Circular Images with a Border Radius",
|
||
"dashedName": "waypoint-make-circular-images-with-a-border-radius",
|
||
"difficulty": 0.030,
|
||
"description": [
|
||
"Give your cat photo a <code>border-radius</code> of 50%.",
|
||
"In addition to pixels, you can also specify a <code>border-radius</code> using a percentage."
|
||
],
|
||
"tests": [
|
||
"assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 10px;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08816",
|
||
"name": "Waypoint: Link to External Pages with Anchor Elements",
|
||
"dashedName": "waypoint-link-to-external-pages-with-anchor-elements",
|
||
"difficulty": 0.031,
|
||
"description": [
|
||
"Create an <code>a</code> element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".",
|
||
"Here's a diagram of an <code>a</code> element. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.",
|
||
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
|
||
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>."
|
||
],
|
||
"tests": [
|
||
"assert((/cat photos/gi).test($('a').text()), 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
|
||
"assert($('a').filter(function(index) { return /com/gi.test($('a').attr('href')); }).length > 0, 'You need an <code>a</code> element that links to <code>http://catphotoapp.com<code>.')",
|
||
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08817",
|
||
"name": "Waypoint: Wrap an Anchor Element within a Paragraph",
|
||
"dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph",
|
||
"difficulty": 0.032,
|
||
"description": [
|
||
"Now wrap your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.",
|
||
"Again, here's a diagram of an <code>a</code> element for your reference:",
|
||
"<img class='img-responsive' alt='a diagram of how anchor tags are composed with the same text as on the following line' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>",
|
||
"Here's an example: <code><p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
|
||
"assert($('a').text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
|
||
"assert($('p') && $('p').length > 2, 'Create a new <code>p</code> element around your <code>a</code> element. \"click here for\".')",
|
||
"assert($('a[href=\\'http://www.catphotoapp.com\\']').parent().is('p'), 'Your <code>a</code> element should be wrapped within your new <code>p</code> element.')",
|
||
"assert($('p').text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')",
|
||
"assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
|
||
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<a href='http://www.catphotoapp.com'>cat photos</a>",
|
||
"",
|
||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08817",
|
||
"name": "Waypoint: Make Dead Links using the Hash Symbol",
|
||
"dashedName": "waypoint-make-dead-links-using-the-hash-symbol",
|
||
"difficulty": 0.033,
|
||
"description": [
|
||
"Use the hash symbol (#) to turn your <code>a</code> element's link into a dead link.",
|
||
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
|
||
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
|
||
"Replace your <code>a</code> element's <code>href</code> attribute with a hash symbol to turn it into a dead link."
|
||
],
|
||
"tests": [
|
||
"assert($('a').attr('href') === '#', 'Your <code>anchor</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='http://www.catphotoapp.com'>cat photos</a>.</p>",
|
||
"",
|
||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08820",
|
||
"name": "Waypoint: Turn an Image into a Link",
|
||
"dashedName": "waypoint-turn-an-image-into-a-link",
|
||
"difficulty": 0.034,
|
||
"description": [
|
||
"Wrap your <code>img</code> element inside an <code>a</code> element with a dead link.",
|
||
"You can make elements into links by wrapping them within an <code>a</code> element.",
|
||
"Wrap your image within an <code>a</code> element. Here's an example: <code><a href='#'><img src='http://bit.ly/fcc-kittens2'/></a></code>.",
|
||
"Remember to use the hash symbol (#) 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."
|
||
],
|
||
"tests": [
|
||
"assert(new RegExp('#').test($('a').children('img').parent().attr('href')), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to \"#\".')",
|
||
"assert($('a').children('img').length > 0, 'Wrap your image element within an <code>a</code> element.')",
|
||
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08818",
|
||
"name": "Waypoint: Add Alt Text to an Image for Accessibility",
|
||
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
|
||
"difficulty": 0.035,
|
||
"description": [
|
||
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo.",
|
||
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt</code> attributes.",
|
||
"In short, every image should have an <code>alt</code> attribute!",
|
||
"<code>alt</code> attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
|
||
"You can add an <code>alt</code> attribute right in the img element like this: <code><img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an <code>alt</code> attribute set to \"A cute orange cat lying on its back\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08827",
|
||
"name": "Waypoint: Create a Bulleted Unordered List",
|
||
"dashedName": "waypoint-create-a-bulleted-unordered-list",
|
||
"difficulty": 0.036,
|
||
"description": [
|
||
"Replace your <code>p</code> elements with an unordered list of three things that cats love.",
|
||
"HTML has a special element for creating unordered lists, or bullet point-style lists.",
|
||
"Unordered lists start with a <code><ul></code> element. Then they contain some number of <code><li></code> elements.",
|
||
"For example: <code><ul><li>milk</li><li>cheese</li></ul></code> would create a bulleted list of \"milk\" and \"cheese\"."
|
||
],
|
||
"tests": [
|
||
"assert($('ul').length > 0, 'Create a <code>ul</code> element.')",
|
||
"assert($('li').length > 2, 'Add three <code>li</code> elements to your <code>ul</code> element.')",
|
||
"assert(editor.match(/<\\/ul>/g) && editor.match(/<ul/g) && editor.match(/<\\/ul>/g).length === editor.match(/<ul/g).length, 'Make sure your <code>ul</code> element has a closing tag.')",
|
||
"assert(editor.match(/<\\/li>/g) && editor.match(/<li>/g) && editor.match(/<\\/li>/g).length === editor.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p class='red-text'>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
|
||
"<p class='red-text'>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08828",
|
||
"name": "Waypoint: Create an Ordered List",
|
||
"dashedName": "waypoint-create-an-ordered-list",
|
||
"difficulty": 0.037,
|
||
"description": [
|
||
"Create an ordered list of the top 3 things cats hate the most.",
|
||
"HTML has a special element for creating ordered lists, or numbered-style lists.",
|
||
"Ordered lists start with a <code><ol></code> element. Then they contain some number of <code><li></code> elements.",
|
||
"For example: <code><ol><li>hydrogen</li><li>helium</li></ol></code> would create a numbered list of \"hydrogen\" and \"helium\"."
|
||
],
|
||
"tests": [
|
||
"assert($('ul').length > 0, 'You should have an <code>ul</code> element on your page.')",
|
||
"assert($('ol').length > 0, 'You should have an <code>ol</code> element on your page.')",
|
||
"assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ul</code> element.')",
|
||
"assert($('li').length > 5, 'You should have three <code>li</code> elements within your <code>ol</code> element.')",
|
||
"assert(editor.match(/<\\/ul>/g) && editor.match(/<\\/ul>/g).length === editor.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.')",
|
||
"assert(editor.match(/<\\/ol>/g) && editor.match(/<\\/ol>/g).length === editor.match(/<ol>/g).length, 'Make sure your <code>ol</code> element has a closing tag.')",
|
||
"assert(editor.match(/<\\/li>/g) && editor.match(/<li>/g) && editor.match(/<\\/li>/g).length === editor.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08829",
|
||
"name": "Waypoint: Create a Text Field",
|
||
"dashedName": "waypoint-create-a-text-field",
|
||
"difficulty": 0.038,
|
||
"description": [
|
||
"Now we'll create a web form. Create a text input under your lists.",
|
||
"Text inputs are a convenient way to get input from your user.",
|
||
"You can create one like this: <code><input type='text'></code>. Note that <code>input</code> elements are self-closing."
|
||
],
|
||
"tests": [
|
||
"assert($('input').length > 0, 'Your app should have an text field input element.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08830",
|
||
"name": "Waypoint: Add Placeholder Text to a Text Field",
|
||
"dashedName": "waypoint-add-placeholder-text-to-a-text-field",
|
||
"difficulty": 0.039,
|
||
"description": [
|
||
"Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\".",
|
||
"Your placeholder text is what appears in your text <code>input</code> before your user has inputed anything.",
|
||
"You can create placeholder text like so: <code><input type='text' placeholder='this is placeholder text'></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('input[placeholder]').length > 0, 'Add a <code>placeholder</code> attribute text <code>input</code> element.')",
|
||
"assert($('input').attr('placeholder').match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<input type='text'>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08830",
|
||
"name": "Waypoint: Create a Form Element",
|
||
"dashedName": "waypoint-create-a-form-element",
|
||
"difficulty": 0.040,
|
||
"description": [
|
||
"Wrap your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element.",
|
||
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
|
||
"For example: <code><form action=\"/url-where-you-want-to-submit-form-data\"></form></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('form').length > 0, 'Wrap your text input element within a <code>form</code> element.')",
|
||
"assert($('form').attr('action'), 'Your <code>form</code> element should have an <code>action</code> attribute.')",
|
||
"assert(editor.match(/<\\/form>/g) && editor.match(/<form/g) && editor.match(/<\\/form>/g).length === editor.match(/<form/g).length, 'Make sure your <code>form</code> element has a closing tag.')",
|
||
"assert(editor.match(/\\/submit-cat-photo/ig), 'Make sure your <code>form</code> action is set to <code>/submit-cat-photo</code>.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<input type='text' placeholder='cat photo URL'>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedd08830",
|
||
"name": "Waypoint: Add a Submit Button to a Form",
|
||
"dashedName": "waypoint-add-a-submit-button-to-a-form",
|
||
"difficulty": 0.041,
|
||
"description": [
|
||
"Add a submit button to your <code>form</code> element with type \"submit\" and \"Submit\" as its text.",
|
||
"Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
|
||
"Here's an example submit button: <code><button type='submit'>this button submits the form</button></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('form').children('button').length > 0, 'Your form should have a button inside it.')",
|
||
"assert($('button').attr('type') === 'submit', 'Your submit button should have be of input type \"submit\".')",
|
||
"assert($('button').text().match(/submit/gi), 'Your submit button should have the text \"submit\".')",
|
||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <input type='text' placeholder='cat photo URL'>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedc08830",
|
||
"name": "Waypoint: Use HTML5 to Require a Field",
|
||
"dashedName": "waypoint-use-html5-to-require-a-field",
|
||
"difficulty": 0.042,
|
||
"description": [
|
||
"Make your text <code>input</code> a \"required\" field, so that your user can't submit the form without completing this field.",
|
||
"You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
|
||
"For example, if you wanted to make a text input field required, you can just add the word \"required\" within your <code>input</code> element, you would use: <code><input type='text' required></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('input').prop('required'), 'Your text <code>input</code> element should have the \"required\" attribute.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <input type='text' placeholder='cat photo URL'>",
|
||
" <button type='submit'>Submit</button>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08834",
|
||
"name": "Waypoint: Create a Set of Radio Buttons",
|
||
"dashedName": "waypoint-create-a-set-of-radio-buttons",
|
||
"difficulty": 0.043,
|
||
"description": [
|
||
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\".",
|
||
"You can use radio buttons for questions where you want the user to only give you one answer.",
|
||
"Radio buttons are a type of <code>input</code>.",
|
||
"Each of your radio buttons should be wrapped within its own <code>label</code> elements.",
|
||
"All related radio buttons should have the same <code>name</code> attribute.",
|
||
"Here's an example of a radio button: <code><label><input type='radio' name='indoor-outdoor'> Indoor</label></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')",
|
||
"assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the <code>name</code> attribute of \"indoor-outdoor\".')",
|
||
"assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')",
|
||
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
|
||
"assert($('label').text().match(/indoor/gi), 'One of your radio buttons should have the label \"indoor\".')",
|
||
"assert($('label').text().match(/outdoor/gi), 'One of your radio buttons should have the label \"outdoor\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <input type='text' placeholder='cat photo URL' required>",
|
||
" <button type='submit'>Submit</button>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08835",
|
||
"name": "Waypoint: Create a Set of Checkboxes",
|
||
"dashedName": "waypoint-create-a-set-of-checkboxes",
|
||
"difficulty": 0.044,
|
||
"description": [
|
||
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\".",
|
||
"Forms commonly use checkbox inputs for questions that may have more than one answer.",
|
||
"For example: <code><label><input type='checkbox' name='personality'> Loving</label></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
|
||
"assert($('label:has(input[type=\"checkbox\"])').length > 2, 'Each of your three checkbox elements should be wrapped in its own <code>label</code> element.')",
|
||
"assert(editor.match(/<\\/label>/g) && editor.match(/<label/g) && editor.match(/<\\/label>/g).length === editor.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.')",
|
||
"assert($('input[type=\"checkbox\"]:nth-child(1)').attr('name') === 'personality', 'Give your checkboxes buttons the <code>name</code> attribute of \"personality\".')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
|
||
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
|
||
" <input type='text' placeholder='cat photo URL' required>",
|
||
" <button type='submit'>Submit</button>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede18835",
|
||
"name": "Waypoint: Clean up your form using Linebreaks",
|
||
"dashedName": "waypoint-clean-up-your-form-using-linebreaks",
|
||
"difficulty": 0.045,
|
||
"description": [
|
||
"Clean up your form by adding linebreaks between form elements.",
|
||
"Remember that you can create a linebreak element by using the code: <code><br></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('br').length > 1, 'Add at least 2 line breaks to visually separate your form elements.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
|
||
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
|
||
" <label><input type='checkbox' name='personality'> Loving</label>",
|
||
" <label><input type='checkbox' name='personality'> Lazy</label>",
|
||
" <label><input type='checkbox' name='personality'> Energetic</label>",
|
||
" <input type='text' placeholder='cat photo URL' required>",
|
||
" <button type='submit'>Submit</button>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedd08835",
|
||
"name": "Waypoint: Check Radio Buttons and Checkboxes by Default",
|
||
"dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default",
|
||
"difficulty": 0.046,
|
||
"description": [
|
||
"Set the first of your radio buttons and the first of your checkboxes to both be checked by default.",
|
||
"You set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
|
||
"To do this, just add the word \"checked\" to the inside of an input element. For example, <code><input type='radio' name='test-name' checked></code>."
|
||
],
|
||
"tests": [
|
||
"assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');",
|
||
"assert($('input[type=\"checkbox\"]').prop('checked'), 'Your first checkbox on your form should be checked by default.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
|
||
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
|
||
" <br>",
|
||
" <label><input type='checkbox' name='personality'> Loving</label>",
|
||
" <label><input type='checkbox' name='personality'> Lazy</label>",
|
||
" <label><input type='checkbox' name='personality'> Energetic</label>",
|
||
" <br>",
|
||
" <input type='text' placeholder='cat photo URL' required>",
|
||
" <button type='submit'>Submit</button>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede08835",
|
||
"name": "Waypoint: Wrap Many Elements within a Single Div Element",
|
||
"dashedName": "waypoint-wrap-many-elements-within-a-single-div-element",
|
||
"difficulty": 0.047,
|
||
"description": [
|
||
"Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element.",
|
||
"The <code>div</code> element, or \"Division\" element, is a general purpose container for other elements.",
|
||
"The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
|
||
"Just like any other non-self-closing element, you can open a <code>div</code> element with <code><div></code> and close it on another line with <code></div></code>.",
|
||
"Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>."
|
||
],
|
||
"tests": [
|
||
"assert($('div').children('ol').length > 0, 'Wrap your <code>ol</code> element inside your <code>div</code> element.')",
|
||
"assert($('div').children('p').length > 1, 'Wrap your <code>p</code> element inside your <code>div</code> element.')",
|
||
"assert($('div').children('ul').length > 0, 'Wrap your <code>ul</code> element inside your <code>div</code> element.')",
|
||
"assert(editor.match(/<\\/div>/g) && editor.match(/<\\/div>/g).length === editor.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<p>Things cats love:</p>",
|
||
"<ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
"</ul>",
|
||
"<p>Top 3 things cats hate:</p>",
|
||
"<ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
"</ol>",
|
||
"",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
|
||
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
|
||
" <br>",
|
||
" <label><input type='checkbox' name='personality' checked> Loving</label>",
|
||
" <label><input type='checkbox' name='personality'> Lazy</label>",
|
||
" <label><input type='checkbox' name='personality'> Energetic</label>",
|
||
" <br>",
|
||
" <input type='text' placeholder='cat photo URL' required>",
|
||
" <button type='submit'>Submit</button>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aede07836",
|
||
"name": "Waypoint: Give a Background Color to a Div Element",
|
||
"dashedName": "waypoint-give-a-background-color-to-a-div-element",
|
||
"difficulty": 0.048,
|
||
"description": [
|
||
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element.",
|
||
"You can set an element's background color with the \"background-color\" attribute.",
|
||
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element."
|
||
],
|
||
"tests": [
|
||
"assert($('div').hasClass('gray-background'), 'Give your <code>div</code> element the class \"gray-background\".')",
|
||
"assert($('.gray-background').css('background-color') === 'rgb(128, 128, 128)', 'Your <code>div</code> element should have a gray background.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||
"<style>",
|
||
" .red-text {",
|
||
" color: red;",
|
||
" }",
|
||
"",
|
||
" h2 {",
|
||
" font-family: Lobster, Monospace;",
|
||
" }",
|
||
"",
|
||
" p {",
|
||
" font-size: 16px;",
|
||
" font-family: Monospace;",
|
||
" }",
|
||
"",
|
||
" .thick-green-border {",
|
||
" border-color: green;",
|
||
" border-width: 10px;",
|
||
" border-style: solid;",
|
||
" border-radius: 50%;",
|
||
" }",
|
||
"",
|
||
" .smaller-image {",
|
||
" width: 100px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||
"",
|
||
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
||
"",
|
||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||
"",
|
||
"<div>",
|
||
" <p>Things cats love:</p>",
|
||
" <ul>",
|
||
" <li>cat nip</li>",
|
||
" <li>laser pointers</li>",
|
||
" <li>lasagna</li>",
|
||
" </ul>",
|
||
" <p>Top 3 things cats hate:</p>",
|
||
" <ol>",
|
||
" <li>flea treatment</li>",
|
||
" <li>thunder</li>",
|
||
" <li>other cats</li>",
|
||
" </ol>",
|
||
"</div>",
|
||
"",
|
||
"<form action=\"/submit-cat-photo\">",
|
||
" <label><input type='radio' name='indoor-outdoor' checked> Indoor</label>",
|
||
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
|
||
" <br>",
|
||
" <label><input type='checkbox' name='personality' checked> Loving</label>",
|
||
" <label><input type='checkbox' name='personality'> Lazy</label>",
|
||
" <label><input type='checkbox' name='personality'> Energetic</label>",
|
||
" <br>",
|
||
" <input type='text' placeholder='cat photo URL' required>",
|
||
" <button type='submit'>Submit</button>",
|
||
"</form>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad88fee1348bd9aedf08825",
|
||
"name": "Waypoint: Adjusting the Padding of an Element",
|
||
"dashedName": "waypoint-adjusting-the-padding-of-an-element",
|
||
"difficulty": 0.064,
|
||
"description": [
|
||
"These next few Waypoints will give you a brief tour of three important aspects of the space surrounding HTML elements: <code>padding</code>, <code>margin</code>, and <code>border</code>. Change the <code>padding</code> of your green box to match that of your red box.",
|
||
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
|
||
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
|
||
"When you increase the green box's <code>padding</code>, it will increase the distance between the text \"padding\" and the border around it."
|
||
],
|
||
"tests": [
|
||
"assert($('.green-box').css('padding-top') === '20px', 'Your <code>green-box</code> class should give elements 20px of padding.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding:10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color:red;",
|
||
" padding: 20px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" padding: 10px;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08822",
|
||
"name": "Waypoint: Adjust the Margin of an Element",
|
||
"dashedName": "waypoint-adjust-the-margin-of-an-element",
|
||
"difficulty": 0.065,
|
||
"description": [
|
||
"Change the <code>margin</code> of the green box to match that of the red box.",
|
||
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
|
||
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the green box, making it appear smaller.",
|
||
"When you increase the green box's <code>margin</code>, it will increase the distance between its border and surrounding elements."
|
||
],
|
||
"tests": [
|
||
"assert($('.green-box').css('margin-top') === '20px', 'Your <code>green-box</code> class should give elements 20px of margin.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding:10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color:red;",
|
||
" padding: 20px;",
|
||
" margin: 20px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" padding: 20px;",
|
||
" margin: 10px;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08823",
|
||
"name": "Waypoint: Add a Negative Margin to an Element",
|
||
"dashedName": "waypoint-add-a-negative-margin-to-an-element",
|
||
"difficulty": 0.066,
|
||
"description": [
|
||
"Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.",
|
||
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
|
||
"If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
|
||
"Try to set the <code>margin</code> to a negative value like the one for the red box."
|
||
],
|
||
"tests": [
|
||
"assert($('.green-box').css('margin-top') === '-15px', 'Your <code>green-box</code> class should give elements -15px of margin.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding:10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color:red;",
|
||
" padding: 20px;",
|
||
" margin: -15px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" padding: 20px;",
|
||
" margin: 20px;",
|
||
" }",
|
||
"</style>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08824",
|
||
"name": "Waypoint: Add Different Padding to Each Side of an Element",
|
||
"dashedName": "waypoint-add-different-padding-to-each-side-of-an-element",
|
||
"difficulty": 0.067,
|
||
"description": [
|
||
"Give the green box a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
|
||
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
|
||
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes."
|
||
],
|
||
"tests": [
|
||
"assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of padding.')",
|
||
"assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of padding.')",
|
||
"assert($('.green-box').css('padding-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of padding.')",
|
||
"assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of padding.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding:10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color:red;",
|
||
" padding-top: 40px;",
|
||
" padding-right: 20px;",
|
||
" padding-bottom: 20px;",
|
||
" padding-left: 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1248bd9aedf08824",
|
||
"name": "Waypoint: Add Different Margins to Each Side of an Element",
|
||
"dashedName": "waypoint-add-different-margins-to-each-side-of-an-element",
|
||
"difficulty": 0.068,
|
||
"description": [
|
||
"Give the green box a <code>margin</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
|
||
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
|
||
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes."
|
||
],
|
||
"tests": [
|
||
"assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
|
||
"assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>margin</code>.')",
|
||
"assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>margin</code>.')",
|
||
"assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>margin</code>.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding:10px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color:red;",
|
||
" margin-top: 40px;",
|
||
" margin-right: 20px;",
|
||
" margin-bottom: 20px;",
|
||
" margin-left: 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08826",
|
||
"name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element",
|
||
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-padding-of-an-element",
|
||
"difficulty": 0.069,
|
||
"description": [
|
||
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
|
||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
|
||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions."
|
||
],
|
||
"tests": [
|
||
"assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>padding</code>.')",
|
||
"assert($('.green-box').css('padding-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>padding</code>.')",
|
||
"assert($('.green-box').css('padding-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>padding</code>.')",
|
||
"assert($('.green-box').css('padding-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>padding</code>.')"
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color:red;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
},
|
||
{
|
||
"id": "bad87fee1348bd9aedf08726",
|
||
"name": "Waypoint: Use Clockwise Notation to Specify the Margin of an Element",
|
||
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-margin-of-an-element",
|
||
"difficulty": 0.070,
|
||
"description": [
|
||
"Let's try this again, but with <code>margin</code> this time. Use <code>Clockwise Notation</code> to give an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
|
||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
|
||
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions."
|
||
],
|
||
"tests": [
|
||
"assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
|
||
"assert($('.green-box').css('margin-right') === '20px', 'Your <code>green-box</code> class should give the right of elements 20px of <code>margin</code>.')",
|
||
"assert($('.green-box').css('margin-bottom') === '20px', 'Your <code>green-box</code> class should give the bottom of elements 20px of <code>margin</code>.')",
|
||
"assert($('.green-box').css('margin-left') === '40px', 'Your <code>green-box</code> class should give the left of elements 40px of <code>margin</code>.')"
|
||
|
||
],
|
||
"challengeSeed": [
|
||
"<style>",
|
||
" .injected-text {",
|
||
" margin-bottom: -25px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .box {",
|
||
" border-style: solid;",
|
||
" border-color: black;",
|
||
" border-width: 5px;",
|
||
" text-align: center;",
|
||
" }",
|
||
"",
|
||
" .yellow-box {",
|
||
" background-color: yellow;",
|
||
" padding: 20px 40px 20px 40px;",
|
||
" }",
|
||
" ",
|
||
" .red-box {",
|
||
" background-color:red;",
|
||
" margin: 20px 40px 20px 40px;",
|
||
" }",
|
||
"",
|
||
" .green-box {",
|
||
" background-color: green;",
|
||
" }",
|
||
"</style>",
|
||
"<h5 class=\"injected-text\">margin</h5>",
|
||
"",
|
||
"<div class=\"box yellow-box\">",
|
||
" <h5 class=\"box red-box\">padding</h5>",
|
||
" <h5 class=\"box green-box\">padding</h5>",
|
||
"</div>"
|
||
],
|
||
"challengeType": 0,
|
||
"nameCn": "",
|
||
"descriptionCn": [],
|
||
"nameFr": "",
|
||
"descriptionFr": [],
|
||
"nameRu": "",
|
||
"descriptionRu": [],
|
||
"nameEs": "",
|
||
"descriptionEs": [],
|
||
"namePt": "",
|
||
"descriptionPt": []
|
||
}
|
||
]
|
||
}
|