QA many of the earlier challenges
This commit is contained in:
Quincy Larson
@ -146,11 +146,11 @@
|
||||
"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 the <code>text editor</code> we've embedded into this web page.",
|
||||
"Do you see the code in the text editor that says <code><h1>Hello</h1></code>? That's an HTML <code>element</code>.",
|
||||
"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 the challenge, 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 the <code>h1</code> tag's text to say \"Hello World\" instead of \"Hello\"."
|
||||
"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 h1 element should have the text \"Hello World\"')"
|
||||
@ -165,17 +165,17 @@
|
||||
"name": "Use the h2 Element",
|
||||
"difficulty": 0.010,
|
||||
"description": [
|
||||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to make a second HTML <code>element</code> below the \"Hello World\" <code>h1</code> element.",
|
||||
"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 h2 element you enter will create an h2 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.isTrue((/cat(\\s)+photo(\\s)+app/gi).test($('h2').text()), 'Your h2 element should have the text \"CatPhotoApp\"')",
|
||||
"assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your h2 element should have the text \"CatPhotoApp\"')",
|
||||
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>hello world</h1>"
|
||||
"<h1>Hello World</h1>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
@ -319,7 +319,7 @@
|
||||
"",
|
||||
"<br/>",
|
||||
"",
|
||||
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
||||
"<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
|
||||
},
|
||||
@ -330,8 +330,8 @@
|
||||
"description": [
|
||||
"Change the <code>h2</code> element's style so that its text color is red.",
|
||||
"We can do this by changing the <code>style</code> of the <code>h2</code> element.",
|
||||
"The style responsible for the color of an element's text is the \"color\" style.",
|
||||
"Here's how you would set the <code>h2</code> element's text color to blue: <code><h2 style=\"color: blue\">CatPhotoApp<h2></code>"
|
||||
"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 h2 element should be red.')"
|
||||
@ -339,7 +339,7 @@
|
||||
"challengeSeed": [
|
||||
"<h2>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
||||
"<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
|
||||
},
|
||||
@ -348,13 +348,13 @@
|
||||
"name": "Use CSS Selectors to Style Elements",
|
||||
"difficulty": 0.018,
|
||||
"description": [
|
||||
"Create remove your <code>h2</code> element's <code>style</code> tag and write the CSS to make all <code>h2</code> elements blue.",
|
||||
"Delete your <code>h2</code> element's <code>style</code> tag and write the CSS to make all <code>h2</code> elements blue.",
|
||||
"With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, you were giving that individual h2 element an <code>inline style</code>",
|
||||
"That's one way to add style to an element, but a better way is by using <code>Cascading Style Sheets (CSS)</code>.",
|
||||
"At the top of your code, create a <code>style tag</code> like this: <code><style></style></code>",
|
||||
"Inside that style element, you can create a <code>css selector</code> 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 an <code>opening and closing curly braces</code> (<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 the element's styles."
|
||||
"Note that it's important to have <code>opening and closing curly braces</code> (<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 h2 element should be blue.')",
|
||||
@ -363,7 +363,7 @@
|
||||
"challengeSeed": [
|
||||
"<h2 style='color: red'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
||||
"<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
|
||||
},
|
||||
@ -372,12 +372,13 @@
|
||||
"name": "Use a CSS Class to Style an Element",
|
||||
"difficulty": 0.019,
|
||||
"description": [
|
||||
"Create a CSS class called <code>.red-text</code> and apply it to the <code>h2</code> element.",
|
||||
"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' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>",
|
||||
"Classes always start with a period. You can see that we've created a CSS class called <code>.blue-text</code> within the <code><style></code> tag.",
|
||||
"You can apply a class to an element like this: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>",
|
||||
"<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 Style tag, try removing the h2 style declaration from the existing style element, and replace it with the class declaration for \".red-text\"."
|
||||
],
|
||||
"tests": [
|
||||
@ -393,7 +394,7 @@
|
||||
"",
|
||||
"<h2>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
||||
"<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
|
||||
},
|
||||
@ -420,7 +421,7 @@
|
||||
"",
|
||||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
||||
"<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
|
||||
},
|
||||
@ -429,14 +430,14 @@
|
||||
"name": "Change the Font Size of an Element",
|
||||
"difficulty": 0.021,
|
||||
"description": [
|
||||
"Set the font size of all <code>p</code> elements to 16 pixels",
|
||||
"Create a second <code>p</code> element. Then set the font size of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"First, create a second paragraph 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 paragraph 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 <code>.red-text</code> class."
|
||||
"See if you can figure out how to give both of your paragraph 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 paragraph elements with Kitty Ipsum text.')",
|
||||
"assert($('p').css('font-size') === '16px', 'Your paragraph elements should have be 16px font.')"
|
||||
"assert($('p').css('font-size') === '16px', 'Your paragraph elements should have the font-size of 16px.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -447,18 +448,18 @@
|
||||
"",
|
||||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>"
|
||||
"<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
|
||||
},
|
||||
{
|
||||
"_id": "bad87fee1348bd9aede08807",
|
||||
"name": "Set the Font of an Element",
|
||||
"name": "Set the Font Family of an Element",
|
||||
"difficulty": 0.022,
|
||||
"description": [
|
||||
"Make all paragraph elements use the \"Monospace\" font.",
|
||||
"You can set an element's font by using the <code>font-family</code> attribute.",
|
||||
"For example, if you wanted to set your h2 element's font \"San-serif\", you would use the following CSS: <code>h2 { font-family: 'San-serif'; }</code>"
|
||||
"For example, if you wanted to set your h2 element's font to \"San-serif\", you would use the following CSS: <code>h2 { font-family: 'San-serif'; }</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('p').css('font-family').match(/monospace/i), 'Your paragraph elements should use the font \"Monospace\".')"
|
||||
@ -476,7 +477,7 @@
|
||||
"",
|
||||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -486,11 +487,11 @@
|
||||
"name": "Import a Google Font",
|
||||
"difficulty": 0.023,
|
||||
"description": [
|
||||
"Apply the font-family of Lobster to your h2 element.",
|
||||
"First, you'll need to make a <code>call</code> to Google to grab the \"Lobster\" font and loads it into your HTML.",
|
||||
"Copy and paste this into your code editor above your <code>style</code> element:",
|
||||
"Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.",
|
||||
"First, you'll need to make a <code>call</code> 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 above your <code>style</code> element:",
|
||||
"<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."
|
||||
"Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')"
|
||||
@ -509,7 +510,7 @@
|
||||
"",
|
||||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -519,11 +520,11 @@
|
||||
"name": "Specify How Fonts Should Degrade",
|
||||
"difficulty": 0.024,
|
||||
"description": [
|
||||
"Make all h2 elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the Lobster font isn't available.",
|
||||
"Commented out your call to Google Fonts, so that our \"Lobter\" isn't available.",
|
||||
"You can leave Lobster as the font, and have it <code>degrade</code> to a different font if that font isn't available.",
|
||||
"For example, if you prefer \"Helvetica\", but want to degrade to \"Sans-Serif\" when Helvetica isn't available, you can do use this 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 the h2 elements to use \"Lobster\" and degrade to \"Monospace\"."
|
||||
"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 do 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 h2 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\".')",
|
||||
@ -548,7 +549,7 @@
|
||||
"",
|
||||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -563,7 +564,7 @@
|
||||
"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: !important > inline style > css class selector > css selector. That is, !important trumps all other styles, and inline styles trump style tag declarations.",
|
||||
"Look at the example in the editor's style tag to see how you can use !important.",
|
||||
"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 h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations."
|
||||
],
|
||||
"tests": [
|
||||
@ -590,7 +591,7 @@
|
||||
"",
|
||||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -601,10 +602,10 @@
|
||||
"name": "Add an Image to your Website",
|
||||
"difficulty": 0.026,
|
||||
"description": [
|
||||
"Use an img 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.",
|
||||
"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/cutegraycat</code>."
|
||||
"Try it with this image: <code>http://bit.ly/fcc-kittens</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('img').length > 0, 'Your webpage should have an image element.')",
|
||||
@ -629,7 +630,7 @@
|
||||
"",
|
||||
"<h2 class='red-text'>CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -641,7 +642,7 @@
|
||||
"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 images width.",
|
||||
"Create a class called <code>smaller-image</code> and added it to the image element. Change the width to 100 pixels."
|
||||
"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\".')",
|
||||
@ -668,7 +669,7 @@
|
||||
"",
|
||||
"<img src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -678,14 +679,13 @@
|
||||
"name": "Add a Border Around an Element",
|
||||
"difficulty": 0.028,
|
||||
"description": [
|
||||
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border around your cat photo.",
|
||||
"<code>CSS Borders</code> have attributes like style, color and width.",
|
||||
"We've created an example border around your h1 element. See if you can add a 10-pixel-wide green border around your cat photo."
|
||||
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border around an HTML element, and apply it 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 image element should have the class \"thick-green-border\".')",
|
||||
"assert($('img').css('border-left-color') === 'rgb(0,128,0)', 'This test is broken. Sorry. Your image should have a green border.')",
|
||||
"assert(parseInt($('img').css('border-left-width')) > 8, 'Your image should have a border with a width of 10 pixels.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -713,7 +713,7 @@
|
||||
"",
|
||||
"<img class='smaller-image' src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -762,7 +762,7 @@
|
||||
"",
|
||||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -776,7 +776,7 @@
|
||||
"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%, making it perfectly circular.')"
|
||||
"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'>",
|
||||
@ -810,7 +810,7 @@
|
||||
"",
|
||||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -820,10 +820,10 @@
|
||||
"name": "Use an Anchor Tag to Link to an External Page",
|
||||
"difficulty": 0.031,
|
||||
"description": [
|
||||
"Create an <code>anchor tag</code> hyperlink that links to http://catphotoapp.com and has the anchor text \"cat photos\".",
|
||||
"Here's a diagram of an <code>anchor tag</code>. In this case, it's used in the middle of a paragraph element, which means a link will appear in the middle of the sentence.",
|
||||
"<img class='img-responsive' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>"
|
||||
|
||||
"Create an <code>anchor</code> element that links to http://catphotoapp.com and has \"cat photos\" as its anchor text (link text).",
|
||||
"Here's a diagram of an <code>anchor tag</code>. 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((/photo/gi).test($('a').text()), 'You need an <code>anchor</code> element that links to \"catphotoapp.com\".')",
|
||||
@ -861,24 +861,25 @@
|
||||
"",
|
||||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
},
|
||||
{
|
||||
"_id": "bad87fee1348bd9aede08817",
|
||||
"name": "Wrap an Anchor Element in a Paragraph",
|
||||
"name": "Wrap an Anchor Element within a Paragraph",
|
||||
"difficulty": 0.032,
|
||||
"description": [
|
||||
"Now nest your anchor element inside a <code>paragraph</code> element. For example, \"click here for cat photos\", where only \"cat photos\" is a link.",
|
||||
"Now wrap your anchor element within a <code>paragraph</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>anchor tag</code> for your reference:",
|
||||
"<img class='img-responsive' src='https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png'/>"
|
||||
"<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((/photo/gi).test($('a').text()), 'You need an <code>anchor</code> element that links to \"catphotoapp.com\".')",
|
||||
"assert($('a').filter(function(index) { return /photo/gi.test($('a')[index]); }).length === 1, 'Your <code>anchor</code> element should have the anchor text of \"See my cat photos\"')",
|
||||
"assert($('a').parent().is('p'), 'Your anchor element should be nested in a paragraph element.')"
|
||||
"assert($('a').parent().is('p'), 'Your anchor element should be wrapped within a paragraph element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||||
@ -914,7 +915,7 @@
|
||||
"",
|
||||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -967,7 +968,7 @@
|
||||
"",
|
||||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -977,14 +978,14 @@
|
||||
"name": "Turn an Image into a Link",
|
||||
"difficulty": 0.034,
|
||||
"description": [
|
||||
"Wrap the your cat's image element inside an anchor element that is a dead link.",
|
||||
"Wrap your <code>img</code> element inside an anchor element with a dead link.",
|
||||
"You can make elements into links by wrapping them in an <code>anchor tag</code>.",
|
||||
"Check out the example snow-colored cat's photo. When you hover over it with your cursor, you'll see the finger pointer you usually see when you hover over a link. The photo is now a link.",
|
||||
"Wrap your gray cat's photo in an <code>anchor tag</code>",
|
||||
"Use the hash symbol as the <code>anchor tag</code>'s <code>href</code>."
|
||||
"Wrap your image in an <code>anchor tag</code>. 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>anchor tag</code>'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($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length > 1, 'Your image element should be wrapped in an anchor element that has its <code>href</code> attribute set to \"#\".')"
|
||||
"assert($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length > 1, 'Wrap your image element inside an anchor element that has its <code>href</code> attribute set to \"#\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||||
@ -1020,7 +1021,7 @@
|
||||
"",
|
||||
"<img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -1073,7 +1074,7 @@
|
||||
"",
|
||||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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
|
||||
@ -1084,12 +1085,14 @@
|
||||
"name": "Create a Bulleted Unordered List",
|
||||
"difficulty" : 0.036,
|
||||
"description": [
|
||||
"Replace the paragraph elements with an unordered list of things that cats love.",
|
||||
""
|
||||
"Replace the paragraph 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, 'You should have an <code>ol</code> element on your webpage.')",
|
||||
"assert($('li').length > 2, 'You should have three or more <code>li</code> elements on within your <code>ul</code> element.')"
|
||||
"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.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||||
@ -1125,7 +1128,7 @@
|
||||
"",
|
||||
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
||||
"",
|
||||
"<p class='red-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>",
|
||||
"<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,
|
||||
@ -1138,7 +1141,9 @@
|
||||
"difficulty" : 0.037,
|
||||
"description": [
|
||||
"Create an <code>ordered list</code> of the 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 webpage.')",
|
||||
@ -1196,8 +1201,9 @@
|
||||
"name": "Create a Text Field",
|
||||
"difficulty" : 0.038,
|
||||
"description": [
|
||||
"Create a text field under your lists.",
|
||||
""
|
||||
"Now we'll create a web form. Create a text field 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>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input[type=\"text\"').length > 0, 'Your webpage should have an text field input element.')"
|
||||
@ -1259,7 +1265,8 @@
|
||||
"difficulty" : 0.039,
|
||||
"description": [
|
||||
"Add the placeholder text \"type a cat photo URL here\" to your text field.",
|
||||
""
|
||||
"Placeholder text will appear in your text field before your user has inputed anything.",
|
||||
"For example: <code><input type='text' placeholder='this is placeholder text'></code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"cat photo URL\".')"
|
||||
@ -1322,10 +1329,12 @@
|
||||
"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, 'Your webpage should have form element that wraps its text field input element.')"
|
||||
"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.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||||
@ -1385,7 +1394,8 @@
|
||||
"difficulty" : 0.041,
|
||||
"description": [
|
||||
"Add a submit button to your form field.",
|
||||
""
|
||||
"Let's add a submit button to your form. Clicking this button will send the date 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($('button').length > 0, 'Your form should have a button inside it.')"
|
||||
@ -1450,10 +1460,12 @@
|
||||
"difficulty" : 0.042,
|
||||
"description": [
|
||||
"Make it required for your user to input text into your form before being able to submit it.",
|
||||
""
|
||||
"You can require your user to complete specific form fields before they will be able to submit your form.",
|
||||
"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 use: <code><input type='text' required></code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('input').prop('required'), 'Your text field have the property of being required.')"
|
||||
"assert($('input').prop('required'), 'Your text field have the property of being required.')",
|
||||
"assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"cat photo URL\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
||||
@ -1515,11 +1527,16 @@
|
||||
"name": "Create a Set of Radio Buttons",
|
||||
"difficulty" : 0.043,
|
||||
"description": [
|
||||
"Add to your form a pair of <code>radio buttons</code> with the options of \"indoor\" and \"outdoor\".",
|
||||
"You can use <code>radio buttons</code> for questions that can only have only one answer."
|
||||
"Add to your form a pair of <code>radio buttons</code> that are wrapped in <code>label</code> elements and share a <code>name</code> attribute, with the options of \"indoor\" and \"outdoor\".",
|
||||
"You can use <code>radio buttons</code> for questions where you want the user to only give you one answer.",
|
||||
"Radio buttons are a type of <code>input</code>.",
|
||||
"Radio buttons should be wrapped within <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 webpage should have two radio button elements.')",
|
||||
"assert($('input[type=\"radio\"').attr('name'), 'Both of your radio button should have <code>name</code> attributes with the same value.')",
|
||||
"assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -1582,7 +1599,9 @@
|
||||
"name": "Create a Set of Checkboxes",
|
||||
"difficulty" : 0.044,
|
||||
"description": [
|
||||
"Create a set of three checkboxes."
|
||||
"Add to your form a set of three <code>checkbox</code> elements that are wrapped in <code>label</code> elements and share the same <code>name</code> attribute.",
|
||||
"Forms commonly use <code>checkbox</code> elements 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 webpage should have three checkbox elements.')",
|
||||
@ -1650,11 +1669,11 @@
|
||||
"name": "Clean up your form using Linebreaks",
|
||||
"difficulty" : 0.045,
|
||||
"description": [
|
||||
"Clean up your form by adding linebreaks between form elements",
|
||||
""
|
||||
"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 > 2, 'Your webpage should use at least 3 line breaks to visually separate your form elements.')"
|
||||
"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'>",
|
||||
@ -1718,7 +1737,7 @@
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348bd9aedd08835",
|
||||
"name": "Check a Radio Button and Checkbox by Default",
|
||||
"name": "Check Radio Buttons and Checkboxes by Default",
|
||||
"difficulty" : 0.046,
|
||||
"description": [
|
||||
"Set one of your radio buttons and one of your checkboxes to be checked by default.",
|
||||
|
||||
Reference in New Issue
Block a user