add a bunch of padding and margin related courseware, and start bootstrap courseware
This commit is contained in:
Michael Q Larson
@ -779,9 +779,9 @@
|
||||
"name": "Adjusting the Padding of an Element",
|
||||
"difficulty" : "0.28",
|
||||
"description": [
|
||||
"Change the <code>padding</code> of the yellow box to 20 pixels.",
|
||||
"Change the <code>padding</code> of the green box to match that of the red box.",
|
||||
"An element's <code>padding</code> controls the amount of space between an element and its <code>border</code>.",
|
||||
"Here, we can see that the green box and the red box and the green box are nested within the blue box.",
|
||||
"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 <code>padding</code> 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": [
|
||||
@ -801,8 +801,8 @@
|
||||
" text-align: center;",
|
||||
" }",
|
||||
"",
|
||||
" .blue-box {",
|
||||
" background-color: blue;",
|
||||
" .yellow-box {",
|
||||
" background-color: yellow;",
|
||||
" padding:10px;",
|
||||
" }",
|
||||
" ",
|
||||
@ -818,7 +818,7 @@
|
||||
"</style>",
|
||||
"<h5 class=\"injected-text\">margin</h5>",
|
||||
"",
|
||||
"<div class=\"box blue-box\">",
|
||||
"<div class=\"box yellow-box\">",
|
||||
" <h5 class=\"box red-box\">padding</h5>",
|
||||
" <h5 class=\"box green-box\">padding</h5>",
|
||||
"</div>"
|
||||
@ -826,38 +826,56 @@
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348bd9aedf08821",
|
||||
"name": "Add Padding to an Element",
|
||||
"difficulty" : "0.29",
|
||||
"description": [
|
||||
"",
|
||||
""
|
||||
],
|
||||
"tests": [
|
||||
"expect($('h1')).to.have.class('text-center');",
|
||||
"expect($('h1')).to.have.text('hello world');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>hello world</h1>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348bd9aedf08822",
|
||||
"name": "Add a Margin to an Element",
|
||||
"name": "Adjust the Margin of an Element",
|
||||
"difficulty" : "0.30",
|
||||
"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 and the green 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 padding, it will increase the distance between its border and surrounding elements."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('h1')).to.have.class('text-center');",
|
||||
"expect($('h1')).to.have.text('hello world');"
|
||||
"expect($('.green-box')).to.have.css('margin', '20px')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>hello world</h1>"
|
||||
"<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
|
||||
},
|
||||
@ -867,69 +885,209 @@
|
||||
"name": "Add a Negative Margin to an Element",
|
||||
"difficulty" : "0.31",
|
||||
"description": [
|
||||
"",
|
||||
""
|
||||
"Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the blue box.",
|
||||
"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 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($('h1')).to.have.class('text-center');",
|
||||
"expect($('h1')).to.have.text('hello world');"
|
||||
"expect($('.green-box')).to.have.css('margin', '-15px')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>hello world</h1>"
|
||||
"<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
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348bd9aedf08824",
|
||||
"name": "Add Padding Only to the Top and Bottom of an Element",
|
||||
"name": "Add Different Padding to Each Side of an Element TEST",
|
||||
"difficulty" : "0.32",
|
||||
"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 <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('h1')).to.have.class('text-center');",
|
||||
"expect($('h1')).to.have.text('hello world');"
|
||||
"expect($('.green-box')).to.have.css('padding-bottom', '20px')",
|
||||
"expect($('.green-box')).to.have.css('padding-left', '40px')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>hello world</h1>"
|
||||
"<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
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348bd9aedf08825",
|
||||
"name": "Add Margin Only to the Left and Right of an Element",
|
||||
"difficulty" : "0.33",
|
||||
"_id" : "bad87fee1248bd9aedf08824",
|
||||
"name": "Add Different a Margin to Each Side of an Element TEST",
|
||||
"difficulty" : "0.32",
|
||||
"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 <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('h1')).to.have.class('text-center');",
|
||||
"expect($('h1')).to.have.text('hello world');"
|
||||
"expect($('.green-box')).to.have.css('margin-bottom', '20px')",
|
||||
"expect($('.green-box')).to.have.css('margin-left', '40px')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>hello world</h1>"
|
||||
"<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
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348bd9aedf08826",
|
||||
"name": "Use Clockwise Padding Notation",
|
||||
"name": "Use Clockwise Notation to Specify an Element's Padding",
|
||||
"difficulty" : "0.34",
|
||||
"description": [
|
||||
"",
|
||||
""
|
||||
"Use <code>Clockwise Notation</code> 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 <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.",
|
||||
"You can also use this notation for margins!"
|
||||
],
|
||||
"tests": [
|
||||
"expect($('h1')).to.have.class('text-center');",
|
||||
"expect($('h1')).to.have.text('hello world');"
|
||||
"expect($('.green-box')).to.have.css('margin-bottom', '20px')",
|
||||
"expect($('.green-box')).to.have.css('margin-left', '40px')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>hello world</h1>"
|
||||
"<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;",
|
||||
" }",
|
||||
"",
|
||||
" .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
|
||||
},
|
||||
@ -950,14 +1108,22 @@
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .red-text {",
|
||||
" color: #ff0000;",
|
||||
" .narrow-image {",
|
||||
" width: 200px;",
|
||||
" }",
|
||||
"",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>hello world</h1>",
|
||||
"<h2 class=\"red-text\">cat photo app</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>",
|
||||
"<img src=\"http://bit.ly/cutegraycat\"/>"
|
||||
"<h2>cat photo app</h2>",
|
||||
"<img class=\"thick-green-border narrow-image\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<a href=\"http://www.google.com\">This is a link to Google</a>",
|
||||
"<br/>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
@ -967,25 +1133,25 @@
|
||||
"name": "Center Text with Bootstrap",
|
||||
"difficulty" : "0.36",
|
||||
"description": [
|
||||
"Add Bootstrap's <code>text-center</code> class to your h1 and h2 elements.",
|
||||
"Now that we're using Bootstrap, we can center our heading elements (h1 and h2) to make them look better. All we need to do is add the class <code>text-center</code> to the h1 and h2 elements.",
|
||||
"Add Bootstrap's <code>text-center</code> 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 <code>text-center</code> to the h1 and h2 elements.",
|
||||
"Note that you can add several classes to the same element by seperating each of them with a space, like this: <code><h2 class=\"text-red text-center\">your text</h2></code>."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('h1')).to.have.class('text-center');",
|
||||
"expect($('h2')).to.have.class('text-center');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .red-text {",
|
||||
" color: #ff0000;",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"",
|
||||
"</style>",
|
||||
"<h1>hello world</h1>",
|
||||
"<h2 class=\"red-text\">cat photo app</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>",
|
||||
"<img class=\"img-responsive\" src=\"http://bit.ly/cutegraycat\"/>"
|
||||
"<h2>cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
@ -995,25 +1161,260 @@
|
||||
"name": "Create a Button",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Create a bootstrap button with the class <code></code>.",
|
||||
"Now that we're using Bootstrap, we can center our heading elements (h1 and h2) to make them look better. All we need to do is add the class <code>text-center</code> to the h1 and h2 elements.",
|
||||
"Note that you can add several classes to the same element by seperating each of them with a space, like this: <code><h2 class=\"text-red text-center\">your text</h2></code>."
|
||||
"Create a button with the text \"Delete\" using the HTML <code>button</code> element.",
|
||||
"HTML has special elements that function like links, but look like buttons. Let's creating a default HTML button."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('h1')).to.have.class('text-center');",
|
||||
"expect($('h2')).to.have.class('text-center');"
|
||||
"expect((/delete/gi).test($('button').text())).to.be.true;"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .red-text {",
|
||||
" color: #ff0000;",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"",
|
||||
"</style>",
|
||||
"<h1>hello world</h1>",
|
||||
"<h2 class=\"red-text\">cat photo app</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>",
|
||||
"<img class=\"img-responsive\" src=\"http://bit.ly/cutegraycat\"/>"
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<button href=\"#\">Like</button>",
|
||||
"<br/>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348cd8acdf08812",
|
||||
"name": "Create a Bootstrap Button",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Apply the Bootstrap's <code>btn</code> class to both of your buttons.",
|
||||
"Bootstrap has its own button styles, which look much better than the plain HTML ones."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('.btn').length).to.eql(2);"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<button href=\"#\">Like</button>",
|
||||
"<br/>",
|
||||
"<button href=\"#\">Delete</button>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348cd8acef08812",
|
||||
"name": "Create a Block Element Bootstrap Button",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Add Bootstrap's <code>btn-block</code> class to both of your buttons.",
|
||||
"Normally, your buttons are only as wide as the text they contain. By making them <code>block elements</code>, your button will stretch to fill your page's entire horizontal space.",
|
||||
"Note that these buttons still need the <code>btn</code> class."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('.btn-block').length).to.eql(2);"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<button class=\"btn\" href=\"#\">Like</button>",
|
||||
"<br/>",
|
||||
"<button class=\"btn\" href=\"#\">Delete</button>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348cd8acef08812",
|
||||
"name": "Color a Bootstrap Button with Button Primary",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Add Bootstrap's <code>btn-block</code> class to both of your buttons.",
|
||||
"Normally, your buttons are only as wide as the text they contain. By making them <code>block elements</code>, your button will stretch to fill your page's entire horizontal space.",
|
||||
"Note that these buttons still need the <code>btn</code> class."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('.btn-block').length).to.eql(2);"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block\" href=\"#\">Like</button>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block\" href=\"#\">Delete</button>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348cd8acef08812",
|
||||
"name": "Color a Bootstrap Button with Button Primary",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Add Bootstrap's <code>btn-primary</code> class to both of your buttons.",
|
||||
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-primary</code> class is the main button color you'll use throughout your app.",
|
||||
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('.btn-primary').length).to.eql(2);"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block\" href=\"#\">Like</button>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block\" href=\"#\">Delete</button>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad87fee1348ce8acef08812",
|
||||
"name": "Warn your Users of a Dangerous Action with the Bootstrap Button Danger Class",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Change the \"Delete\" button from <code>btn-primary</code> to <code>btn-danger</code>.",
|
||||
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-danger</code> 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 <code>btn</code> and <code>btn-block</code> classes."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('.btn-danger').length).to.eql(1);"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad88fee1348ce8acef08812",
|
||||
"name": "Use the Bootstrap Grid to Put Two Elements Side By Side",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <code><div class=\"row\"></code> element and each of them in a <code><div class=\"row\"></code> 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 <code>div</code> element.",
|
||||
"The <code>row</code> class is applied to a <code>div</element</code>, and the buttons themselves can be <code>nested</code> within it."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('.row').length).to.eql(2);",
|
||||
"expect($('.col-xs-12').length).to.eql(4);"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<div class=\"row\">",
|
||||
" <div class=\"col-xs-6\">",
|
||||
" <button class=\"btn btn-block btn-success\" href=\"#\">Back</button>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-6\">",
|
||||
" <button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
"<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
{
|
||||
"_id" : "bad89fee1348ce8acef08812",
|
||||
"name": "Wrap Side By Side Elements in a Bootstrap Row",
|
||||
"difficulty" : "0.37",
|
||||
"description": [
|
||||
"Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <code><div class=\"row\"></code> element and each of them in a <code><div class=\"row\"></code> 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 <code>div</code> element.",
|
||||
"The <code>row</code> class is applied to a <code>div</element</code>, and the buttons themselves can be <code>nested</code> within it."
|
||||
],
|
||||
"tests": [
|
||||
"expect($('.row').length).to.eql(2);",
|
||||
"expect($('.col-xs-12').length).to.eql(4);"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
" .thick-green-border {",
|
||||
" border-style: solid;",
|
||||
" border-color: #00ff00;",
|
||||
" border-width: 10px;",
|
||||
" border-radius: 50%;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h2 class=\"text-center\">cat photo app</h2>",
|
||||
"<img class=\"thick-green-border img-responsive\" src=\"http://bit.ly/cutegraycat\"/>",
|
||||
"<br/>",
|
||||
"<div class=\"row\">",
|
||||
" <div class=\"col-xs-6\">",
|
||||
" <button class=\"btn btn-block btn-success\" href=\"#\">Back</button>",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-6\">",
|
||||
" <button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
"<button class=\"btn btn-block btn-primary\" href=\"#\">Like</button>",
|
||||
"<br/>",
|
||||
"<button class=\"btn btn-block btn-primary\" href=\"#\">Delete</button>"
|
||||
],
|
||||
"challengeType": 0
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user