jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-01-07 18:03:49 -05:00
Code Issues Projects Releases Wiki Activity
Files
3ee2c293247dfe2efc4e9e7d3cfc27db56325658
freeCodeCamp/seed_data/challenges/bootstrap.json
Quincy Larson 3ee2c29324 more challenge-related view and copy improvements
2015-05-24 23:51:56 -07:00

1598 lines
60 KiB
JSON
Raw Blame History

{
"name": "Bootstrap",
"order" : 0.003,
"challenges": [
{
"_id": "bad87fee1348bd9acde08812",
"name": "Waypoint: Mobile Responsive Images",
"difficulty": 0.047,
"description": [
"Add a new image with the <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\", and add the <code>img-responsive</code> 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 <code>Responsive CSS Framework</code> called written by Twitter called Bootstrap. You can add Bootstrap to any app just by including it with <code>&#60;link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/&#62;</code> at the top of your HTML, but we've gone ahead and included it for you here.",
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name <code>Responsive Design</code>.",
"Now all you need to do is add the <code>img-responsive</code> 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\"')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348bd8acde08812",
"name": "Waypoint: Center Text with Bootstrap",
"difficulty": 0.048,
"description": [
"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 separating each of them with a space, like this: <code>&#60h2 class=\"text-red text-center\"&#62your text&#60/h2&#62</code>."
],
"tests": [
"assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348cd8acdf08812",
"name": "Waypoint: Create a Bootstrap Button",
"difficulty": 0.049,
"description": [
"Create a new button below your large kitten photo with the class \"btn\" and the text of \"like this photo\".",
"Bootstrap has its own button styles, which look much better than the plain HTML ones."
],
"tests": [
"assert($('.btn').length > 0, 'your new button should have the class \"btn\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text text-center'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348cd8acef08812",
"name": "Waypoint: Create a Block Element Bootstrap Button",
"difficulty": 0.050,
"description": [
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button.",
"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": [
"assert($('.btn-block').length > 0, 'your new button should have the class \"btn-block\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text text-center'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<button class='btn'>Like</button>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348cd8acef08811",
"name": "Waypoint: Rock Bootstrap Buttons",
"difficulty": 0.051,
"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": [
"assert($('.btn-primary').length > 0, 'your new button should have the class \"btn-primary\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text text-center'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<button class='btn btn-block'>Like</button>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348cd8acef08813",
"name": "Waypoint: Color a Bootstrap Button 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 <code>btn-info</code> class to it.",
"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": [
"assert($('.btn-info').length > 0, 'your new button should have the class \"btn-info\".')",
"assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text text-center'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<button class='btn btn-block btn-primary'>Like</button>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348ce8acef08814",
"name": "Waypoint: Warn your Users of a Dangerous Action",
"difficulty": 0.053,
"description": [
"Create a button with the text \"delete\" and give it the class <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": [
"assert($('.btn-danger').length > 0, 'Your new button should have the class \"btn-danger\".')",
"assert($('.btn-block').length > 1, 'Both of your Bootstrap buttons should have the class \"btn-block\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text text-center'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<button class='btn btn-block btn-primary'>Like</button>",
"<button class='btn btn-block btn-info'>Info</button>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad88fee1348ce8acef08815",
"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 <code>&#60;div class=\"row\"&#62;</code> element and each of them in a <code>&#60;div class=\"col-xs-4\"&#62;</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</code>, and the buttons themselves can be <code>nested</code> within it."
],
"tests": [
"assert($('.row').length > 0, 'Your new button should be wrapped within a div with the class \"row\".')",
"assert($('.col-xs-4').length > 2, 'Each of your bootstrap buttons should be wrapped in a div with the class \"col-xs-4\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text text-center'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<button class='btn btn-block btn-primary'>Like</button>",
"<button class='btn btn-block btn-info'>Info</button>",
"<button class='btn btn-block btn-danger'>Delete</button>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedf08845",
"name": "Waypoint: Ditch Custom CSS for Bootstrap",
"difficulty" : 0.055,
"description": [
"Delete the following from your style tag: <code>.red-text</code>, <code>p</code>, <code>.smaller-image</code>. Delete the <code>p</code> element with the dead link. Remove your <code>red-text</code> class from your <code>h2</code> element and instead apply the <code>text-primary</code> Bootstrap class. Replace the <code>smaller-image</code> class on your top image with the <code>img-responsive</code> class."
],
"tests": [
"assert(!$('h2').hasClass('red-text'), 'You h2 element should no longer have the class \"red-text\".')",
"assert($('h2').hasClass('text-primary'), 'You h2 element should now have the class \"text-primary\".')",
"assert(!$('p').css('font-family').match(/monospace/i), 'Your paragraph elements should no longer use the font \"Monospace\".')",
"assert($('.img-responsive').length > 1, 'Remove the \"smaller-image\" class from your top image and replace it with the \"img-responsive\" class.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<h2 class='red-text text-center'>CatPhotoApp</h2>",
"",
"<p>Click here for <a href='#'>cat photos</a>.</p>",
"",
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'>Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'>Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'>Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aede08845",
"name": "Waypoint: Create a Custom Heading",
"difficulty" : 0.056,
"description": [
"Wrap your first image and your h2 element in a <code>&#60;div class='row'&#62;</code> element. Wrap your h2 text in a <code>&#60;div class='col-xs-8'&#62;</code> and your image in a <code>&#60;div class='col-xs-4'&#62;</code> so that they are on the same line."
],
"tests": [
"assert($('.row').length > 1, 'Your h2 and top image elements should both be wrapped together within a div with the class \"row\".')",
"assert($('.col-xs-4').length > 3, 'Wrap your top image inside a div with the class \"col-xs-4\".')",
"assert($('.col-xs-8').length > 0, 'Wrap your h2 element inside a div with the class \"col-xs-8\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"</style>",
"",
"<h2 class='text-primary text-center'>CatPhotoApp</h2>",
"",
"<a href='#'><img class='img-responsive' src='https://bit.ly/fcc-kittens'/></a>",
"",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'>Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'>Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'>Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedd08845",
"name": "Waypoint: Add Font Awesome Icons to our Buttons",
"difficulty" : 0.057,
"description": [
"Use Font Awesome to add a \"like\" icon to your like button.",
"You should add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;</code> within your like button's element."
],
"tests": [
"assert($('.fa-thumbs-up').length > 0, 'You should add a <code>&#60;i class=\"fa fa-thumbs-up\"&#62;&#60;i&#62;</code> within your like button element.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"</style>",
"",
"<div class='row'>",
" <div class='col-xs-8'>",
" <h2 class='text-primary text-center'>CatPhotoApp</h2>",
" </div>",
" <div class='col-xs-4'>",
" <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
" </div>",
"</div>",
"<br>",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'>Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'>Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'>Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedc08845",
"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 <code>&#60;i class=\"fa fa-thumbs-up\"&#62;</code> within your like button's element."
],
"tests": [
"assert($('.fa-trash').length > 0, 'You should add a <code>&#60;i class=\"fa fa-trash\"&#62;&#60;i&#62;</code> within your like button element.')",
"assert($('.fa-info-circle').length > 0, 'You should add a <code>&#60;i class=\"fa fa-info-circle\"&#62;&#60;i&#62;</code> within your like button element.')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"</style>",
"",
"<div class='row'>",
" <div class='col-xs-8'>",
" <h2 class='text-primary text-center'>CatPhotoApp</h2>",
" </div>",
" <div class='col-xs-4'>",
" <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
" </div>",
"</div>",
"<br>",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'>Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'>Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aedb08845",
"name": "Waypoint: Responsively Style a Radio Buttons",
"difficulty" : 0.059,
"description": [
"Wrap all of your radio buttons in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-6'&#62;</code> element."
],
"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\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"</style>",
"",
"<div class='row'>",
" <div class='col-xs-8'>",
" <h2 class='text-primary text-center'>CatPhotoApp</h2>",
" </div>",
" <div class='col-xs-4'>",
" <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
" </div>",
"</div>",
"<br>",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aeda08845",
"name": "Waypoint: Responsively Style Checkboxes",
"difficulty" : 0.060,
"description": [
"Wrap all your checkboxes in a <code>&#60;div class='row'&#62;</code> element. Then wrap each of them in a <code>&#60;div class='col-xs-4'&#62;</code> element."
],
"tests": [
"assert($('.row').length > 3, 'Wrap your all of your checkboxes inside one div with the class \"row\".')",
"assert($('.col-xs-4').length > 6, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
"</style>",
"",
"<div class='row'>",
" <div class='col-xs-8'>",
" <h2 class='text-primary text-center'>CatPhotoApp</h2>",
" </div>",
" <div class='col-xs-4'>",
" <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
" </div>",
"</div>",
"<br>",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <div class='row'>",
" <div class='col-xs-6'>",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" </div>",
" <div class='col-xs-6'>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" </div>",
" </div>",
" <br>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aed908845",
"name": "Waypoint: Style a Text Input with the Bootstrap Form Control Class",
"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 <code>&#60;i class=\"fa fa-paper-plane\"&#62;&#60;i&#62;</code> within your submit button element.')",
"assert($('.form-control').length > 0, 'Give your form's text input field in a class of \"form-control\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
"</style>",
"",
"<div class='row'>",
" <div class='col-xs-8'>",
" <h2 class='text-primary text-center'>CatPhotoApp</h2>",
" </div>",
" <div class='col-xs-4'>",
" <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
" </div>",
"</div>",
"<br>",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <br>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" </div>",
" <div class='col-xs-6'>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" </div>",
" </div>",
" <br>",
" <div class='row'>",
" <div class='col-xs-4'>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" </div>",
" <div class='col-xs-4'>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" </div>",
" <div class='col-xs-4'>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" </div>",
" </div>",
" <br>",
" <input type='text' placeholder='cat photo URL' required>",
" <button type='submit'>Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id" : "bad87fee1348bd9aec908845",
"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\"."
],
"tests": [
"assert($('.row').length > 4, 'Wrap your all of your checkboxes inside one div with the class \"row\".')",
"assert($('.col-xs-5').length > 0, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')",
"assert($('.col-xs-7').length > 0, 'Wrap each of your checkboxes inside its own div with the class \"col-xs-4\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
"</style>",
"",
"<div class='row'>",
" <div class='col-xs-8'>",
" <h2 class='text-primary text-center'>CatPhotoApp</h2>",
" </div>",
" <div class='col-xs-4'>",
" <a href='#'><img class='img-responsive thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
" </div>",
"</div>",
"<br>",
"<img src='http://bit.ly/fcc-kittens2' class='img-responsive'>",
"<br>",
"<div class='row'>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-primary'><i class='fa fa-thumbs-up'></i> Like</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-info'><i class='fa fa-info-circle'></i> Info</button>",
" </div>",
" <div class='col-xs-4'>",
" <button class='btn btn-block btn-danger'><i class='fa fa-trash'></i> Delete</button>",
" </div>",
"</div>",
"<p>Things cats love:</p>",
"<ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
"</ul>",
"<p>Top 3 things cats hate:</p>",
"<ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
"</ol>",
"<form action=\"/submit-cat-photo\">",
" <br>",
" <div class='row'>",
" <div class='col-xs-6'>",
" <label><input type='radio' name='indoor-outdoor'> Indoor</label>",
" </div>",
" <div class='col-xs-6'>",
" <label><input type='radio' name='indoor-outdoor'> Outdoor</label>",
" </div>",
" </div>",
" <br>",
" <div class='row'>",
" <div class='col-xs-4'>",
" <label><input type='checkbox' name='personality'> Loving</label>",
" </div>",
" <div class='col-xs-4'>",
" <label><input type='checkbox' name='personality'> Lazy</label>",
" </div>",
" <div class='col-xs-4'>",
" <label><input type='checkbox' name='personality'> Crazy</label>",
" </div>",
" </div>",
" <br>",
" <input type='text' class='form-control' placeholder='cat photo URL' required>",
" <button type='submit' class='btn btn-primary'><i class='fa fa-paper-plane'></i> Submit</button>",
"</form>"
],
"challengeType": 0
},
{
"_id": "bad88fee1348bd9aedf08825",
"name": "Waypoint: Adjusting the Padding of an Element",
"difficulty": 0.064,
"description": [
"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 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": [
"expect($('.green-box')).to.have.css('padding', '20px')"
],
"challengeSeed": [
"<style>",
" .injected-text {",
" margin-bottom: -25px;",
" text-align: center;",
" }",
"",
" .box {",
" border-style: solid;",
" border-color: black;",
" border-width: 5px;",
" text-align: center;",
" }",
"",
" .yellow-box {",
" background-color: yellow;",
" padding:10px;",
" }",
" ",
" .red-box {",
" background-color:red;",
" padding: 20px;",
" }",
"",
" .green-box {",
" background-color: green;",
" padding: 10px;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
"",
"<div class=\"box yellow-box\">",
" <h5 class=\"box red-box\">padding</h5>",
" <h5 class=\"box green-box\">padding</h5>",
"</div>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348bd9aedf08822",
"name": "Waypoint: Adjust the Margin of an Element",
"difficulty": 0.065,
"description": [
"Change the <code>margin</code> of the green box to match that of the red box.",
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
"Here, we can see that the green box and the red box 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($('.green-box')).to.have.css('margin', '20px')"
],
"challengeSeed": [
"<style>",
" .injected-text {",
" margin-bottom: -25px;",
" text-align: center;",
" }",
"",
" .box {",
" border-style: solid;",
" border-color: black;",
" border-width: 5px;",
" text-align: center;",
" }",
"",
" .yellow-box {",
" background-color: yellow;",
" padding:10px;",
" }",
" ",
" .red-box {",
" background-color:red;",
" padding: 20px;",
" margin: 20px;",
" }",
"",
" .green-box {",
" background-color: green;",
" padding: 20px;",
" margin: 10px;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
"",
"<div class=\"box yellow-box\">",
" <h5 class=\"box red-box\">padding</h5>",
" <h5 class=\"box green-box\">padding</h5>",
"</div>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348bd9aedf08823",
"name": "Waypoint: Add a Negative Margin to an Element",
"difficulty": 0.066,
"description": [
"Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the 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($('.green-box')).to.have.css('margin', '-15px')"
],
"challengeSeed": [
"<style>",
" .injected-text {",
" margin-bottom: -25px;",
" text-align: center;",
" }",
"",
" .box {",
" border-style: solid;",
" border-color: black;",
" border-width: 5px;",
" text-align: center;",
" }",
"",
" .yellow-box {",
" background-color: yellow;",
" padding:10px;",
" }",
" ",
" .red-box {",
" background-color:red;",
" padding: 20px;",
" margin: -15px;",
" }",
"",
" .green-box {",
" background-color: green;",
" padding: 20px;",
" margin: 20px;",
" }",
"</style>",
"",
"<div class=\"box yellow-box\">",
" <h5 class=\"box red-box\">padding</h5>",
" <h5 class=\"box green-box\">padding</h5>",
"</div>"
],
"challengeType": 0
},
{
"_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 <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes."
],
"tests": [
"expect($('.green-box')).to.have.css('padding-bottom', '20px')",
"expect($('.green-box')).to.have.css('padding-left', '40px')"
],
"challengeSeed": [
"<style>",
" .injected-text {",
" margin-bottom: -25px;",
" text-align: center;",
" }",
"",
" .box {",
" border-style: solid;",
" border-color: black;",
" border-width: 5px;",
" text-align: center;",
" }",
"",
" .yellow-box {",
" background-color: yellow;",
" padding:10px;",
" }",
" ",
" .red-box {",
" background-color:red;",
" padding-top: 40px;",
" padding-right: 20px;",
" padding-bottom: 20px;",
" padding-left: 40px;",
" }",
"",
" .green-box {",
" background-color: green;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
"",
"<div class=\"box yellow-box\">",
" <h5 class=\"box red-box\">padding</h5>",
" <h5 class=\"box green-box\">padding</h5>",
"</div>"
],
"challengeType": 0
},
{
"_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 <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes."
],
"tests": [
"expect($('.green-box')).to.have.css('margin-bottom', '20px')",
"expect($('.green-box')).to.have.css('margin-left', '40px')"
],
"challengeSeed": [
"<style>",
" .injected-text {",
" margin-bottom: -25px;",
" text-align: center;",
" }",
"",
" .box {",
" border-style: solid;",
" border-color: black;",
" border-width: 5px;",
" text-align: center;",
" }",
"",
" .yellow-box {",
" background-color: yellow;",
" padding:10px;",
" }",
" ",
" .red-box {",
" background-color:red;",
" margin-top: 40px;",
" margin-right: 20px;",
" margin-bottom: 20px;",
" margin-left: 40px;",
" }",
"",
" .green-box {",
" background-color: green;",
" }",
"</style>",
"<h5 class=\"injected-text\">margin</h5>",
"",
"<div class=\"box yellow-box\">",
" <h5 class=\"box red-box\">padding</h5>",
" <h5 class=\"box green-box\">padding</h5>",
"</div>"
],
"challengeType": 0
},
{
"_id": "bad87fee1348bd9aedf08826",
"name": "Waypoint: Use Clockwise Notation to Specify an Element's Padding",
"difficulty": 0.069,
"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($('.green-box')).to.have.css('margin-bottom', '20px')",
"expect($('.green-box')).to.have.css('margin-left', '40px')"
],
"challengeSeed": [
"<style>",
" .injected-text {",
" margin-bottom: -25px;",
" text-align: center;",
" }",
"",
" .box {",
" border-style: solid;",
" border-color: black;",
" border-width: 5px;",
" text-align: center;",
" }",
"",
" .yellow-box {",
" background-color: yellow;",
" padding: 20px 40px 20px 40px;",
" }",
" ",
" .red-box {",
" background-color:red;",
" }",
"",
" .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": "bad87fee1348bd9aede08826",
"name": "Waypoint: Use Hex Codes for Precise Colors",
"difficulty": 0.070,
"description": [
],
"tests": [
],
"challengeSeed": [
],
"challengeType": 0
},
{
"_id": "bad87fee1348bd9aedd08826",
"name": "Waypoint: Use Shortened Hex Codes for Colors",
"difficulty": 0.071,
"description": [
],
"tests": [
],
"challengeSeed": [
]
}
]
}
Reference in New Issue View Git Blame Copy Permalink