diff --git a/seed_data/challenges/basic-html5-and-css.json b/seed_data/challenges/basic-html5-and-css.json
index 1ba903a877..8b773fb39c 100644
--- a/seed_data/challenges/basic-html5-and-css.json
+++ b/seed_data/challenges/basic-html5-and-css.json
@@ -1659,6 +1659,370 @@
""
],
"challengeType" : 0
+ },
+ {
+ "_id": "bad88fee1348bd9aedf08825",
+ "name": "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: padding, margin, and border. Change the padding of your green box to match that of your red box.",
+ "An element's padding controls the amount of space between the element and its border.",
+ "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 padding than the green box.",
+ "When you increase the green box's padding, it will increase the distance between the text \"padding\" and the border around it."
+ ],
+ "tests": [
+ "assert($('.green-box').css('padding-top') === '20px', 'Your green-box class should give elements 20px of padding.')"
+ ],
+ "challengeSeed": [
+ "",
+ "
margin
",
+ "",
+ "
",
+ "
padding
",
+ "
padding
",
+ "
"
+ ],
+ "challengeType": 0
+ },
+ {
+ "_id": "bad87fee1348bd9aedf08822",
+ "name": "Waypoint: Adjust the Margin of an Element",
+ "difficulty": 0.065,
+ "description": [
+ "Change the margin of the green box to match that of the red box.",
+ "An element's margin controls the amount of space between an element's border and surrounding elements.",
+ "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.",
+ "When you increase the green box's padding, it will increase the distance between its border and surrounding elements."
+ ],
+ "tests": [
+ "assert($('.green-box').css('margin-top') === '20px', 'Your green-box class should give elements 20px of margin.')"
+ ],
+ "challengeSeed": [
+ "",
+ "
margin
",
+ "",
+ "
",
+ "
padding
",
+ "
padding
",
+ "
"
+ ],
+ "challengeType": 0
+ },
+ {
+ "_id": "bad87fee1348bd9aedf08823",
+ "name": "Waypoint: Add a Negative Margin to an Element",
+ "difficulty": 0.066,
+ "description": [
+ "Change the margin of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.",
+ "An element's margin controls the amount of space between an element's border and surrounding elements.",
+ "If you set an element's margin to a negative value, the element will grow larger.",
+ "Try to set the margin to a negative value like the one for the red box."
+ ],
+ "tests": [
+ "assert($('.green-box').css('margin-top') === '-15px', 'Your green-box class should give elements -15px of margin.')"
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
padding
",
+ "
padding
",
+ "
"
+ ],
+ "challengeType": 0
+ },
+ {
+ "_id": "bad87fee1348bd9aedf08824",
+ "name": "Waypoint: Add Different Padding to Each Side of an Element",
+ "difficulty": 0.067,
+ "description": [
+ "Give the green box a padding 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 padding on each of its sides.",
+ "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes."
+ ],
+ "tests": [
+ "assert($('.green-box').css('padding-left') === '40px', 'Your green-box class should give the left of elements 40px of padding.')",
+ "assert($('.green-box').css('padding-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of padding.')"
+ ],
+ "challengeSeed": [
+ "",
+ "
margin
",
+ "",
+ "
",
+ "
padding
",
+ "
padding
",
+ "
"
+ ],
+ "challengeType": 0
+ },
+ {
+ "_id": "bad87fee1248bd9aedf08824",
+ "name": "Waypoint: Add Different a Margin to Each Side of an Element",
+ "difficulty": 0.068,
+ "description": [
+ "Give the green box a margin 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 margin on each of its sides.",
+ "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes."
+ ],
+ "tests": [
+ "assert($('.green-box').css('margin-left') === '40px', 'Your green-box class should give the left of elements 40px of margin.')",
+ "assert($('.green-box').css('margin-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of margin.')"
+ ],
+ "challengeSeed": [
+ "",
+ "
margin
",
+ "",
+ "
",
+ "
padding
",
+ "
padding
",
+ "
"
+ ],
+ "challengeType": 0
+ },
+ {
+ "_id": "bad87fee1348bd9aedf08826",
+ "name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element",
+ "difficulty": 0.069,
+ "description": [
+ "Use Clockwise Notation to give an element padding 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 padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.",
+ "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.",
+ "You can also use this notation for margins!"
+ ],
+ "tests": [
+ "assert($('.green-box').css('padding-left') === '40px', 'Your green-box class should give the left of elements 40px of padding.')",
+ "assert($('.green-box').css('padding-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of padding.')"
+ ],
+ "challengeSeed": [
+ "",
+ "
margin
",
+ "",
+ "
",
+ "
padding
",
+ "
padding
",
+ "
"
+ ],
+ "challengeType": 0
+ },
+ {
+ "_id": "bad87fee1348bd9aedf08726",
+ "name": "Waypoint: Use Clockwise Notation to Specify the Margin of an Element",
+ "difficulty": 0.070,
+ "description": [
+ "Let's try this again, but with margin this time. Use Clockwise Notation 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 margin-top, margin-right, margin-bottom, and margin-left attributes, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;.",
+ "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.",
+ "You can also use this notation for margins!"
+ ],
+ "tests": [
+ "assert($('.green-box').css('margin-left') === '40px', 'Your green-box class should give the left of elements 40px of margin.')",
+ "assert($('.green-box').css('margin-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of margin.')"
+ ],
+ "challengeSeed": [
+ "",
+ "
margin
",
+ "",
+ "
",
+ "
padding
",
+ "
padding
",
+ "
"
+ ],
+ "challengeType": 0
}
]
}
diff --git a/seed_data/challenges/bootstrap.json b/seed_data/challenges/bootstrap.json
index c0e282451e..480117ee2c 100644
--- a/seed_data/challenges/bootstrap.json
+++ b/seed_data/challenges/bootstrap.json
@@ -7,15 +7,16 @@
"name": "Waypoint: Mobile Responsive Images",
"difficulty": 0.047,
"description": [
- "Add a new image with the src attribute of \"http://bit.ly/fcc-kittens2\", and add the img-responsive Bootstrap class to the image.",
- "Specifying a width of 200 pixels on our img element made it fit our phone's screen, but it's not a perfect fit. It would be great if the image could be exactly the width of our phone's screen.",
- "Fortunately, there's a Responsive CSS Framework called written by Twitter called Bootstrap. You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML, but we've gone ahead and included it for you here.",
+ "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Twitter Bootstrap responsive CSS framework. First, add a new image with the src attribute of \"http://bit.ly/fcc-kittens2\", and add the img-responsive Bootstrap class to that image.",
+ "It would be great if the image could be exactly the width of our phone's screen.",
+ "Fortunately, we have access to a Responsive CSS Framework called Bootstrap. You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.",
+ "With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
"Now all you need to do is add the img-responsive class to your image."
],
"tests": [
- "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\"')",
- "assert($('img').length > 1, 'You should add an image with the src of \"http://bit.ly/fcc-kittens2\"')"
+ "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
+ "assert($('img').length > 1, 'You should add a second image with the src of http://bit.ly/fcc-kittens2.')"
],
"challengeSeed": [
"",
@@ -83,8 +84,8 @@
"difficulty": 0.048,
"description": [
"Add Bootstrap's text-center class to your h2 element.",
- "Now that we're using Bootstrap, we can center our heading elements (h2) to make them look better. All we need to do is add the class text-center to the h1 and h2 elements.",
- "Note that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>."
+ "Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center to our h1 and h2 elements.",
+ "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>."
],
"tests": [
"assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')"
@@ -298,7 +299,7 @@
},
{
"_id": "bad87fee1348cd8acef08811",
- "name": "Waypoint: Rock Bootstrap Buttons",
+ "name": "Waypoint: Taste the Bootstrap Button Color Rainbow",
"difficulty": 0.051,
"description": [
"Add Bootstrap's btn-block class to both of your buttons.",
@@ -372,11 +373,11 @@
},
{
"_id": "bad87fee1348cd8acef08813",
- "name": "Waypoint: Color a Bootstrap Button with Button Info",
+ "name": "Waypoint: Call out Optional Actions with Button Info",
"difficulty": 0.052,
"description": [
"Create a new block-level Bootstrap button below your \"like\" button with the text \"Info\", and add Bootstrap's btn-info class to it.",
- "Bootstrap comes with several pre-defined colors for buttons. The btn-primary class is the main button color you'll use throughout your app.",
+ "Bootstrap comes with several pre-defined colors for buttons. The btn-info class is used to call attention to optional actions that the user can take.",
"Note that these buttons still need the btn and btn-block classes."
],
"tests": [
@@ -452,7 +453,7 @@
"description": [
"Create a button with the text \"delete\" and give it the class btn-danger.",
"Bootstrap comes with several pre-defined colors for buttons. The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.",
- "Note that this button still needs the btn and btn-block classes."
+ "Note that these buttons still need the btn and btn-block classes."
],
"tests": [
"assert($('.btn-danger').length > 0, 'Your new button should have the class \"btn-danger\".')",
@@ -526,9 +527,13 @@
"name": "Waypoint: Use the Bootstrap Grid to Put Elements Side By Side",
"difficulty": 0.054,
"description": [
- "Put the \"like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"col-xs-4\"> element.",
+ "Put the \"like\", \"Info\" and \"Delete\" buttons side-by-side by wrapping all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.",
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.",
- "The row class is applied to a div, and the buttons themselves can be nested within it."
+ "Here's a diagram of how Bootstrap's 12-column grid layout works:",
+ "",
+ "Note that in this illustration, we use the col-md-* class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.",
+ "In the Cat Photo App that we're building, we'll use col-xs-*, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
+ "The row class is applied to a div, and the buttons themselves can be wrapped within it."
],
"tests": [
"assert($('.row').length > 0, 'Your new button should be wrapped within a div with the class \"row\".')",
@@ -604,7 +609,9 @@
"name": "Waypoint: Ditch Custom CSS for Bootstrap",
"difficulty" : 0.055,
"description": [
- "Delete the following from your style tag: .red-text, p, .smaller-image. Delete the p element with the dead link. Remove your red-text class from your h2 element and instead apply the text-primary Bootstrap class. Replace the smaller-image class on your top image with the img-responsive class."
+ "Delete the following from your style tag: .red-text, p, .smaller-image. Delete the p element with the dead link. Remove your red-text class from your h2 element and instead apply the text-primary Bootstrap class. Replace the smaller-image class on your top image with the img-responsive class.",
+ "We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.",
+ "Don't worry - there will be plenty of time to customize our CSS later."
],
"tests": [
"assert(!$('h2').hasClass('red-text'), 'You h2 element should no longer have the class \"red-text\".')",
@@ -691,7 +698,14 @@
"name": "Waypoint: Create a Custom Heading",
"difficulty" : 0.056,
"description": [
- "Wrap your first image and your h2 element in a <div class='row'> element. Wrap your h2 text in a <div class='col-xs-8'> and your image in a <div class='col-xs-4'> so that they are on the same line."
+ "Wrap your first image and your h2 element within a single <div class='row'> element. Wrap your h2 text within a <div class='col-xs-8'> and your image in a <div class='col-xs-4'> so that they are on the same line.",
+ "We will make a simple heading for our Cat Photo App by putting them in the same row.",
+ "Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.",
+ "Here's a diagram of how Bootstrap's 12-column grid layout works:",
+ "",
+ "Note that in this illustration, we use the col-md-* class. Here, \"md\" means \"medium\", and \"*\" is a number specifying how many columns wide the element should be. In this case, we're specifying how many columns wide an element should be on a medium-sized screen, such as a laptop.",
+ "In the Cat Photo App that we're building, we'll use col-xs-*, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
+ "Notice how the image is now just the right size to fit along the text?"
],
"tests": [
"assert($('.row').length > 1, 'Your h2 and top image elements should both be wrapped together within a div with the class \"row\".')",
@@ -716,7 +730,7 @@
"",
"
CatPhotoApp
",
"",
- "",
+ "",
"",
"",
" ",
@@ -764,10 +778,11 @@
"difficulty" : 0.057,
"description": [
"Use Font Awesome to add a \"like\" icon to your like button.",
- "You should add a <i class=\"fa fa-thumbs-up\"> within your like button's element."
+ "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
+ "Go ahead and add a <i class=\"fa fa-thumbs-up\"></i> within your like button's element."
],
"tests": [
- "assert($('.fa-thumbs-up').length > 0, 'You should add a <i class=\"fa fa-thumbs-up\"><i> within your like button element.')"
+ "assert($('.fa-thumbs-up').length > 0, 'You should add a <i class=\"fa fa-thumbs-up\"></i> within your like button element.')"
],
"challengeSeed": [
"",
@@ -838,12 +853,13 @@
"name": "Waypoint: Add Font Awesome Icons all of our Buttons",
"difficulty" : 0.058,
"description": [
- "Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" button to your delete button.",
- "You should add a <i class=\"fa fa-thumbs-up\"> within your like button's element."
+ "Use Font Awesome to add a \"info-circle\" icon to your info button and a \"trash\" icon to your delete button.",
+ "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
+ "Add <i class=\"fa fa-info-circle\"></i> within your info button's element, and a <i class=\"fa fa-trash\"></i> within your delete button."
],
"tests": [
- "assert($('.fa-trash').length > 0, 'You should add a <i class=\"fa fa-trash\"><i> within your like button element.')",
- "assert($('.fa-info-circle').length > 0, 'You should add a <i class=\"fa fa-info-circle\"><i> within your like button element.')"
+ "assert($('.fa-trash').length > 0, 'You should add a <i class=\"fa fa-trash\"></i> within your like button element.')",
+ "assert($('.fa-info-circle').length > 0, 'You should add a <i class=\"fa fa-info-circle\"></i> within your like button element.')"
],
"challengeSeed": [
"",
@@ -914,11 +930,12 @@
"name": "Waypoint: Responsively Style a Radio Buttons",
"difficulty" : 0.059,
"description": [
- "Wrap all of your radio buttons in a <div class='row'> element. Then wrap each of them in a <div class='col-xs-6'> element."
+ "Wrap all of your radio buttons within a <div class='row'> element. Then wrap each of them within a <div class='col-xs-6'> element.",
+ "You can use Bootstrap's col-xs-* classes on form elements, too! This way, our radio buttons will be evenly spread out across the page, regardless of how wide the screen resolution is."
],
"tests": [
"assert($('.row').length > 2, 'Wrap your all of your radio buttons inside one div with the class \"row\".')",
- "assert($('.col-xs-6').length > 3, 'Wrap each of your radio buttons inside its own div with the class \"col-xs-6\".')"
+ "assert($('.col-xs-6').length > 1, 'Wrap each of your radio buttons inside its own div with the class \"col-xs-6\".')"
],
"challengeSeed": [
"",
@@ -989,7 +1006,8 @@
"name": "Waypoint: Responsively Style Checkboxes",
"difficulty" : 0.060,
"description": [
- "Wrap all your checkboxes in a <div class='row'> element. Then wrap each of them in a <div class='col-xs-4'> element."
+ "Wrap all your checkboxes in a <div class='row'> element. Then wrap each of them in a <div class='col-xs-4'> element.",
+ "You can use Bootstrap's col-xs-* classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is."
],
"tests": [
"assert($('.row').length > 3, 'Wrap your all of your checkboxes inside one div with the class \"row\".')",
@@ -1068,15 +1086,15 @@
{
"_id" : "bad87fee1348bd9aed908845",
- "name": "Waypoint: Style a Text Input with the Bootstrap Form Control Class",
+ "name": "Waypoint: Style Text Inputs as Form Controls",
"difficulty" : 0.061,
"description": [
"Give your form's text input field in a class of \"form-control\". Give your form's submit button the classes \"btn btn-primary\" and give it the Font Awesome icon of \"fa-paper-plane\"."
],
"tests": [
- "assert($('.btn-primary').length > 1, 'Give your form's submit button the classes \"btn btn-primary\".')",
- "assert($('.fa-paper-plane').length > 0, 'You should add a <i class=\"fa fa-paper-plane\"><i> within your submit button element.')",
- "assert($('.form-control').length > 0, 'Give your form's text input field in a class of \"form-control\".')"
+ "assert($('.btn-primary').length > 1, 'Give the submit button in your form the classes \"btn btn-primary\".')",
+ "assert($('.fa-paper-plane').length > 0, 'Add a <i class=\"fa fa-paper-plane\"></i> within your submit button element.')",
+ "assert($('.form-control').length > 0, 'Give the the text input field in your form the class \"form-control\".')"
],
"challengeSeed": [
"",
@@ -1163,7 +1181,9 @@
"name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
"difficulty" : 0.062,
"description": [
- "Wrap both your form's text input field and submit button within a div with the class \"row\". Wrap your form's text input field within a div with the class of \"col-xs-7\". Wrap your form's submit button the in a div with the class \"col-xs-5\"."
+ "Wrap both your form's text input field and submit button within a div with the class \"row\". Wrap your form's text input field within a div with the class of \"col-xs-7\". Wrap your form's submit button the in a div with the class \"col-xs-5\".",
+ "Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a \"row\" element with \"col-xs-*\" elements withing it.",
+ "This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
],
"tests": [
"assert($('.row').length > 4, 'Wrap your all of your checkboxes inside one div with the class \"row\".')",
@@ -1248,350 +1268,6 @@
""
],
"challengeType": 0
- },
-
- {
- "_id": "bad88fee1348bd9aedf08825",
- "name": "Waypoint: Adjusting the Padding of an Element",
- "difficulty": 0.064,
- "description": [
- "Change the padding of the green box to match that of the red box.",
- "An element's padding controls the amount of space between an element and its border.",
- "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more padding than the green box.",
- "When you increase the green box's padding, it will increase the distance between the word \"padding\" and the border around the text."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('padding', '20px')"
- ],
- "challengeSeed": [
- "",
- "
margin
",
- "",
- "
",
- "
padding
",
- "
padding
",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08822",
- "name": "Waypoint: Adjust the Margin of an Element",
- "difficulty": 0.065,
- "description": [
- "Change the margin of the green box to match that of the red box.",
- "An element's margin controls the amount of space between an element's border and surrounding elements.",
- "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.",
- "When you increase the green box's padding, it will increase the distance between its border and surrounding elements."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin', '20px')"
- ],
- "challengeSeed": [
- "",
- "
margin
",
- "",
- "
",
- "
padding
",
- "
padding
",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08823",
- "name": "Waypoint: Add a Negative Margin to an Element",
- "difficulty": 0.066,
- "description": [
- "Change the margin of the green box to a negative value, so it fills the entire horizontal width of the blue box.",
- "An element's margin controls the amount of space between an element's border and surrounding elements.",
- "If you set an element's margin to a negative value, the element will grow larger.",
- "Try to set the margin to a negative value like the one for the red box."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin', '-15px')"
- ],
- "challengeSeed": [
- "",
- "",
- "
",
- "
padding
",
- "
padding
",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08824",
- "name": "Waypoint: Add Different Padding to Each Side of an Element TEST",
- "difficulty": 0.067,
- "description": [
- "Give the green box a padding 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 padding on each of its sides.",
- "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('padding-bottom', '20px')",
- "expect($('.green-box')).to.have.css('padding-left', '40px')"
- ],
- "challengeSeed": [
- "",
- "
margin
",
- "",
- "
",
- "
padding
",
- "
padding
",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1248bd9aedf08824",
- "name": "Waypoint: Add Different a Margin to Each Side of an Element TEST",
- "difficulty": 0.068,
- "description": [
- "Give the green box a margin 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 margin on each of its sides.",
- "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes."
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin-bottom', '20px')",
- "expect($('.green-box')).to.have.css('margin-left', '40px')"
- ],
- "challengeSeed": [
- "",
- "
margin
",
- "",
- "
",
- "
padding
",
- "
padding
",
- "
"
- ],
- "challengeType": 0
- },
- {
- "_id": "bad87fee1348bd9aedf08826",
- "name": "Waypoint: Use Clockwise Notation to Specify an Element's Padding",
- "difficulty": 0.069,
- "description": [
- "Use Clockwise Notation to give an element padding 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 padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.",
- "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.",
- "You can also use this notation for margins!"
- ],
- "tests": [
- "expect($('.green-box')).to.have.css('margin-bottom', '20px')",
- "expect($('.green-box')).to.have.css('margin-left', '40px')"
- ],
- "challengeSeed": [
- "",
- "
",
+ "Note that in this illustration, we use the