{
"name": "Responsive Design with Bootstrap",
"order": 0.003,
"challenges": [
{
"id": "bad87fee1348bd9acde08712",
"name": "Waypoint: Use Responsive Design with Bootstrap Fluid Containers",
"dashedName": "waypoint-use-responsive-design-with-bootstrap-fluid-containers",
"difficulty": 2.01,
"description": [
"Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework.",
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.",
"With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
"You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
"To get started, we should nest all of our HTML in a div element with the class \"container-fluid\"."
],
"tests": [
"assert($('div').hasClass('container-fluid'), 'Your div element should have the class \"row\"')",
"assert(editor.match(/<\\/div>/g) && editor.match(/
/g).length === editor.match(/
div elements has a closing tag.')"
],
"challengeSeed": [
"",
"",
"",
"
",
"",
""
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd9acde08812",
"name": "Waypoint: Make Images Mobile Responsive",
"dashedName": "waypoint-make-images-mobile-responsive",
"difficulty": 2.02,
"description": [
"First, Add a new image with the src attribute of \"http://bit.ly/fcc-kittens2\".",
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the \"img-responsive\" class to your image. Do this, and the image should perfectly fit the width of your page."
],
"tests": [
"assert($('img').length > 1, 'You should have a total of two images.')",
"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')), 'Add a second image with the src of http://bit.ly/fcc-kittens2.')"
],
"challengeSeed": [
"",
"",
"",
"
"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348bd8acde08812",
"name": "Waypoint: Center Text with Bootstrap",
"dashedName": "waypoint-center-text-with-bootstrap",
"difficulty": 2.03,
"description": [
"Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center to our h1 and h2 elements.",
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>."
],
"tests": [
"assert($('h2').hasClass('text-center'), 'Your h2 element should be centered by applying the class \"text-center\"')"
],
"challengeSeed": [
"",
"",
"",
"
"
],
"challengeType": 0,
"nameCn": "",
"descriptionCn": [],
"nameFr": "",
"descriptionFr": [],
"nameRu": "",
"descriptionRu": [],
"nameEs": "",
"descriptionEs": [],
"namePt": "",
"descriptionPt": []
},
{
"id": "bad87fee1348cd8acdf08812",
"name": "Waypoint: Create a Bootstrap Button",
"dashedName": "waypoint-create-a-bootstrap-button",
"difficulty": 2.04,
"description": [
"Bootstrap has its own styles for button elements, which look much better than the plain HTML ones.",
"Create a new button element below your large kitten photo. Give it the class \"btn\" and the text of \"like this photo\"."
],
"tests": [
"assert($('button').hasClass('btn'), 'Your new button should have the class \"btn\".')",
"assert(new RegExp('like this photo','gi').test($('button.btn').text()), 'Your button should have the text \"like this photo\".')",
"assert(editor.match(/<\\/button>/g) && editor.match(/
",
"",
"
",
"