1430 lines
57 KiB
JSON
1430 lines
57 KiB
JSON
{
|
|
"name": "Responsive Design with Bootstrap",
|
|
"order": 0.003,
|
|
"challenges": [
|
|
{
|
|
"_id": "bad87fee1348bd9acde08812",
|
|
"name": "Waypoint: Mobile Responsive Images",
|
|
"difficulty": 0.047,
|
|
"description": [
|
|
"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 <code>src</code> attribute of \"http://bit.ly/fcc-kittens2\", and add the <code>img-responsive</code> 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 <code>Responsive CSS Framework</code> called Bootstrap. You can add Bootstrap to any app just by including it with <code><link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/></code> 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 <code>Responsive Design</code>.",
|
|
"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 <code>img-responsive</code> class to your image."
|
|
],
|
|
"tests": [
|
|
"assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
|
|
"assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'You should add a second image with the <code>src</code> of <code>http://bit.ly/fcc-kittens2</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",
|
|
"<style>",
|
|
" .red-text {",
|
|
" color: red;",
|
|
" }",
|
|
"",
|
|
" h2 {",
|
|
" font-family: Lobster, Monospace;",
|
|
" }",
|
|
"",
|
|
" p {",
|
|
" font-size: 16px;",
|
|
" font-family: Monospace;",
|
|
" }",
|
|
"",
|
|
" .thick-green-border {",
|
|
" border-color: green;",
|
|
" border-width: 10px;",
|
|
" border-style: solid;",
|
|
" border-radius: 50%;",
|
|
" }",
|
|
"",
|
|
" .smaller-image {",
|
|
" width: 100px;",
|
|
" }",
|
|
"</style>",
|
|
"",
|
|
"<h2 class='red-text'>CatPhotoApp</h2>",
|
|
"",
|
|
"<p>Click here for <a href='#'>cat photos</a>.</p>",
|
|
"",
|
|
"<a href='#'><img class='smaller-image thick-green-border' src='https://bit.ly/fcc-kittens'/></a>",
|
|
"",
|
|
"<p>Things cats love:</p>",
|
|
"<ul>",
|
|
" <li>cat nip</li>",
|
|
" <li>laser pointers</li>",
|
|
" <li>lasagna</li>",
|
|
"</ul>",
|
|
"<p>Top 3 things cats hate:</p>",
|
|
"<ol>",
|
|
" <li>flea treatment</li>",
|
|
" <li>thunder</li>",
|
|
" <li>other cats</li>",
|
|
"</ol>",
|
|
"<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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_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 to make them look better. All we need to do is add the class <code>text-center</code> 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: <code><h2 class=\"text-red text-center\">your text</h2></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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_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\".');",
|
|
"assert(new RegExp('like this photo','gi').test($('.btn').text()), 'your button should have the text \"like this photo\"');"
|
|
],
|
|
"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348cd8acef08811",
|
|
"name": "Waypoint: Taste the Bootstrap Button Color Rainbow",
|
|
"difficulty": 0.051,
|
|
"description": [
|
|
"Add Bootstrap's <code>btn-primary</code> class to your button.",
|
|
"The <code>btn-primary</code> class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
|
|
"Note that this button will still need the <code>btn</code> class."
|
|
],
|
|
"tests": [
|
|
"assert($('.btn-primary').length > 0, 'Your new button should have the class \"btn-primary\".')",
|
|
"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'>",
|
|
"<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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348cd8acef08813",
|
|
"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 <code>btn-info</code> and <code>btn-block</code> classes to it.",
|
|
"Bootstrap comes with several pre-defined colors for buttons. The <code>btn-info</code> class is used to call attention to optional actions that the user can take.",
|
|
"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_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 these buttons still need 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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_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 all three of them within one <code><div class=\"row\"></code> element, then each of them within a <code><div class=\"col-xs-4\"></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.",
|
|
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
|
"<a href='http://getbootstrap.com/css/#grid-example-basic' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",
|
|
"Note that in this illustration, we use the <code>col-md-*</code> 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 <code>col-xs-*</code>, where \"*\" is the number of columns wide the element should be, and \"xs\" means \"extra small\", like an extra-small mobile phone screen.",
|
|
"The <code>row</code> class is applied to a <code>div</code>, 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\".')",
|
|
"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348bd9aedf08845",
|
|
"name": "Waypoint: Ditch Custom CSS for Bootstrap",
|
|
"difficulty": 0.055,
|
|
"description": [
|
|
"<ol><li>Delete <code>.red-text</code>, <code>p</code>, and <code>.smaller-image</code> from your <code>style</code> element.</li> <li>Delete the <code>p</code> element that contains the dead link.</li> <li>Remove the <code>red-text</code> class from your <code>h2</code> element and replace it with the <code>text-primary</code> Bootstrap class.</li> <li>Remove the <code>smaller-image</code> class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class.</li></ol>",
|
|
"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\".')",
|
|
"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348bd9aede08845",
|
|
"name": "Waypoint: Create a Custom Heading",
|
|
"difficulty": 0.056,
|
|
"description": [
|
|
"Wrap your first image and your h2 element within a single <code><div class='row'></code> element. Wrap your h2 text within a <code><div class='col-xs-8'></code> and your image in a <code><div class='col-xs-4'></code> 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 <code>div</code> element.",
|
|
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
|
"<a href='http://getbootstrap.com/css/#grid' target='_blank'><img class='img-responsive' src='https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png'></a>",
|
|
"Note that in this illustration, we use the <code>col-md-*</code> 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 <code>col-xs-*</code>, 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\".')",
|
|
"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 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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_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.",
|
|
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> 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 <code><i class=\"fa fa-thumbs-up\"></i></code> within your like button's element."
|
|
],
|
|
"tests": [
|
|
"assert($('.fa-thumbs-up').length > 0, 'Add a <code>i</code> element with the classes \"fa\" and \"fa-thumbs-up\".')",
|
|
"assert($('button').children('i').length > 0, 'Wrap your <code>i</code> element within your <code>button</code> element.')",
|
|
"assert(editor.match(/<\\/i>/g), 'Be sure to close your <code>i</code> element with a closing tag.')"
|
|
],
|
|
"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_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\" icon to your delete button.",
|
|
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> 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 <code><i class=\"fa fa-info-circle\"></i></code> within your info button's element, and a <code><i class=\"fa fa-trash\"></i></code> within your delete button."
|
|
],
|
|
"tests": [
|
|
"assert($('.fa-trash').length > 0, 'You should add a <code><i class=\"fa fa-trash\"></i></code> within your delete button element.')",
|
|
"assert($('.fa-info-circle').length > 0, 'You should add a <code><i class=\"fa fa-info-circle\"></i></code> within your info 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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348bd9aedb08845",
|
|
"name": "Waypoint: Responsively Style Radio Buttons",
|
|
"difficulty": 0.059,
|
|
"description": [
|
|
"Wrap all of your radio buttons within a <code><div class='row'></code> element. Then wrap each of them within a <code><div class='col-xs-6'></code> element.",
|
|
"You can use Bootstrap's <code>col-xs-*</code> 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 > 1, '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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348bd9aeda08845",
|
|
"name": "Waypoint: Responsively Style Checkboxes",
|
|
"difficulty": 0.060,
|
|
"description": [
|
|
"Wrap all your checkboxes in a <code><div class='row'></code> element. Then wrap each of them in a <code><div class='col-xs-4'></code> element.",
|
|
"You can use Bootstrap's <code>col-xs-*</code> 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\".')",
|
|
"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348bd9aed908845",
|
|
"name": "Waypoint: Style Text Inputs as Form Controls",
|
|
"difficulty": 0.061,
|
|
"description": [
|
|
"Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code> and give it the Font Awesome icon of <code>fa-paper-plane</code>."
|
|
],
|
|
"tests": [
|
|
"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 <code><i class=\"fa fa-paper-plane\"></i></code> within your submit button element.')",
|
|
"assert($('.form-control').length > 0, 'Give the text input field in your form the class \"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
},
|
|
{
|
|
"_id": "bad87fee1348bd9aec908845",
|
|
"name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
|
|
"difficulty": 0.062,
|
|
"description": [
|
|
"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 within it.",
|
|
"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\".",
|
|
"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 form submission button and text area in a div with class \"row\".')",
|
|
"assert($('.col-xs-5').length > 0, 'Wrap your form submission button in a div with the class \"col-xs-5\".')",
|
|
"assert($('.col-xs-7').length > 0, 'Wrap your form text area in a div with the class \"col-xs-7\".')"
|
|
],
|
|
"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,
|
|
"nameCn": "",
|
|
"descriptionCn": [],
|
|
"nameFr": "",
|
|
"descriptionFr": [],
|
|
"nameRu": "",
|
|
"descriptionRu": [],
|
|
"nameEs": "",
|
|
"descriptionEs": [],
|
|
"namePt": "",
|
|
"descriptionPt": []
|
|
}
|
|
]
|
|
}
|