From b574bed0a1d4abe7e3697a59ee1c4f1aa1108688 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Mon, 11 May 2015 13:43:12 -0700 Subject: [PATCH 01/17] start integrating html css coursewares --- controllers/challengeMap.js | 2 +- controllers/courseware.js | 4 - seed_data/coursewares.json | 1514 +++++++++++++++-- seed_data/future-coursewares.json | 2589 +---------------------------- 4 files changed, 1412 insertions(+), 2697 deletions(-) diff --git a/controllers/challengeMap.js b/controllers/challengeMap.js index e10c7ab409..be7cc20eb9 100644 --- a/controllers/challengeMap.js +++ b/controllers/challengeMap.js @@ -43,7 +43,7 @@ module.exports = { coursewareList = resources.allCoursewareNames(); completedCoursewareList = noDuplicatedCoursewares; waypoints = coursewareList.filter(function(challenge) { - if (challenge.challengeType === 2) { return challenge } + if (challenge.challengeType === 2 || challenge.challengeType === 0) { return challenge } }); ziplines = coursewareList.filter(function(challenge) { if (challenge.challengeType === 3) { return challenge } diff --git a/controllers/courseware.js b/controllers/courseware.js index 267f09d6e5..fbab4b69bc 100644 --- a/controllers/courseware.js +++ b/controllers/courseware.js @@ -28,9 +28,6 @@ exports.returnNextCourseware = function(req, res, next) { if (!req.user) { return res.redirect('../challenges/learn-how-free-code-camp-works'); } - if (req.user.finishedWaypoints && req.user.uncompletedBonfires.length > 0) { - return res.redirect('../bonfires') - } var completed = req.user.completedCoursewares.map(function (elem) { return elem._id; @@ -46,7 +43,6 @@ exports.returnNextCourseware = function(req, res, next) { var uncompletedCoursewares = req.user.uncompletedCoursewares[0]; - var displayedCoursewares = Courseware.find({'_id': uncompletedCoursewares}); displayedCoursewares.exec(function(err, courseware) { if (err) { diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index 724af142fb..e27ab751f7 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -2,7 +2,7 @@ { "_id": "bd7124d8c441eddfaeb5bdef", "name": "Learn how Free Code Camp Works", - "difficulty": 0.01, + "difficulty": 0.001, "challengeSeed": "125407438", "description": [ "Watch this 1-minute video, or simply read this summary:", @@ -20,7 +20,7 @@ { "_id": "bd7125d8c441eddfaeb5bd0f", "name": "Join Our Chat Room", - "difficulty": 0.02, + "difficulty": 0.002, "challengeSeed": "124555254", "description": [ "Now we're going to join the Free Code Camp chat room. You can come here any time of day to hang out, ask questions, or find another camper to pair program with.", @@ -40,7 +40,7 @@ { "_id": "bd7125d8c441eddfaeb5bdff", "name": "Preview our Challenge Map", - "difficulty": 0.03, + "difficulty": 0.003, "challengeSeed": "125407437", "description": [ "Before you start learning how to code, we'd like to introduce you to a few things.", @@ -55,7 +55,7 @@ { "_id": "bd7125d8c441eddfaeb5bd1f", "name": "Browse our Field Guide", - "difficulty": 0.04, + "difficulty": 0.004, "challengeSeed": "125407435", "description": [ "Free Code Camp has an up-to-date field guide that will answer your many questions.", @@ -70,7 +70,7 @@ { "_id": "bd7125d8c441eddfaeb5bd2f", "name": "Customize your Portfolio Page", - "difficulty": 0.05, + "difficulty": 0.005, "challengeSeed": "125407433", "description": [ "You and all your fellow campers have portfolio pages.", @@ -87,7 +87,7 @@ { "_id": "bd7126d8c441eddfaeb5bd3f", "name": "Try Camper News", - "difficulty": 0.06, + "difficulty": 0.006, "challengeSeed": "124553410", "description": [ "Camper News is the best place for our campers to share and discuss helpful links.", @@ -106,7 +106,7 @@ { "_id": "bd7126d8c441eddfaeb5bd3e", "name": "Meet Other Campers in your City", - "difficulty": 0.065, + "difficulty": 0.007, "challengeSeed": "127358841", "description": [ "One of the best ways to stay motivated when learning to code is to hang out with other campers.", @@ -124,7 +124,7 @@ { "_id": "bd7137d8c441eddfaeb5bdef", "name": "Get Help the Hacker Way with RSAP", - "difficulty": 0.07, + "difficulty": 0.008, "challengeSeed": "125407432", "description": [ "Let's cover one last thing before you start working through our lessons: how to get help.", @@ -140,140 +140,1446 @@ "tests": [] }, { - "_id": "bd7127d8c441eddfaeb5bdef", - "name": "Build a Landing Page with HTML", - "difficulty": 0.08, - "challengeSeed": "125671867", + "_id": "bd7123c8c441eddfaeb5bdef", + "name": "Use HTML Elements", + "difficulty": 0.0085, "description": [ - "Now it's time for us to start our actual coding lessons. We've curated a series of free, self-paced, browser-based lessons from providers like Codecademy and Stanford University.", - "These lessons will cover a lot of ground quickly, and will hold your hand throughout the process. Don't try to memorize everything - you'll spend more than a thousand hours practicing these later, and you can always look things up. Just keep moving.", - "If you've learned HTML and CSS before, these next few Waypoints will be a valuable review. If you haven't learned HTML or CSS before, you're in for a treat!", - "This Codecademy will quickly cover HTML, CSS and even Responsive Design with Bootstrap.", - "If you don't already have a Codecademy account, create one here: http://www.codecademy.com.", - "Go to http://www.codecademy.com/en/skills/make-a-website/topics/html-elements and complete the section.", - "Once you're done, mark this Waypoint complete and move on the next Waypoint." + "Welcome to Free Code Camp's first coding challenge! Click on the button below for further instructions.", + "Awesome. Now you can read the rest of this challenge's instructions.", + "You can edit code in the text editor we've embedded into this web page.", + "Do you see the code in the text editor that says <h1>Hello</h1>? That's an HTML element.", + "Most HTML elements have an opening tag and a closing tag. Opening tags look like this: <h1>. Closing tags look like this: </h1>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.", + "Once you've completed the challenge, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.", + "To enable the \"Go to my next challenge\" button on this exercise, change the h1 tag's text to say \"Hello World\" instead of \"Hello\"." ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')" + ], + "challengeSeed": [ + "

Hello

" + ], + "challengeType": 0 }, { - "_id": "bd7128d8c441eddfaeb5bdef", - "name": "Style Text with CSS", - "difficulty": 0.09, - "challengeSeed": "125671735", + "_id": "bad87fee1348bd9aedf0887a", + "name": "Use the h2 Element", + "difficulty": 0.010, "description": [ - "Cascading Style Sheets (CSS) is what gives HTML it's style.", - "Now let's learn how to style HTML elements, such as headlines and body text, using CSS.", - "Go to http://www.codecademy.com/skills/make-a-website/topics/css-properties-text and complete the section." + "Add an h2 tag that says \"Cat Photo App\" to make a second HTML element below the \"Hello World\" h1 element.", + "The h2 element you enter will create an h2 element on the website.", + "This element tells the browser how to render the text that it contains.", + "h2 elements are slightly smaller than h1 elements. There are also h3, h4, h5 and h6 elements." ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert.isTrue((/cat(\\s)+photo(\\s)+app/gi).test($('h2').text()), 'Your h2 element should have the text \"Cat Photo App\"')", + "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')" + ], + "challengeSeed": [ + "

hello world

" + ], + "challengeType": 0 }, { - "_id": "bd8129d8c441ecdfaeb5bdef", - "name": "Space Out with CSS", - "difficulty": 0.10, - "challengeSeed": "125671732", + "_id": "bad87fee1348bd9aedf08801", + "name": "Use the P Element", + "difficulty": 0.011, "description": [ - "There are several ways to control spacing between elements using CSS. Let's learn about padding, margins, and more.", - "Go to http://www.codecademy.com/skills/make-a-website/topics/css-properties-box and complete the section." + "Create a p element below the h2 element, and give it the text \"Hello Paragraph\".", + "p elements are the preferred element for normal-sized paragraph text on websites.", + "You can create a p element like so: <p>I'm a p tag!</p>" ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your p element should have the text \"Hello Paragraph\"')" + ], + "challengeSeed": [ + "

Hello World

", + "

Cat Photo App

" + ], + "challengeType": 0 }, { - "_id": "bd8129d8c441eddfaeb5bdef", - "name": "Design a Layout with HTML", - "difficulty": 0.11, - "challengeSeed": "125671731", + "_id": "bad87fee1348bd9aeaf08801", + "name": "Add a Line Break to Visually Separate Elements", + "difficulty": 0.012, "description": [ - "Now let's apply the HTML and CSS we've learned toward making a proper layout.", - "We'll learn the difference between block elements and inline elements. We'll also learn the difference between absolute position and relative positioning.", - "Go to http://www.codecademy.com/skills/make-a-website/topics/css-properties-layout and complete the section." + "Add a line break between the <h2> and <p> elements.", + "You can create an line break element with <br/>.", + "Note that <br/> has no closing tag. It is a self-closing element. See how a forward-slash precedes the closing bracket?", + "You'll encounter other self-closing element tags soon." ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert(($('br').length > 0), 'You should have a br element between your h2 and p elements.')" + ], + "challengeSeed": [ + "

Hello World

", + "

Cat Photo App

", + "

Hello Paragraph

" + ], + "challengeType": 0 }, { - "_id": "bd8129d8c441eddfaeb5bdee", - "name": "Design Responsively with Bootstrap", - "difficulty": 0.12, - "challengeSeed": "125671730", + "_id": "bad87fee1348bd9aedf08802", + "name": "Uncomment HTML", + "difficulty": 0.013, "description": [ - "Responsive Design is the practice of building web applications that look good on any screen size - whether it's a phone or a big screen TV.", - "Bootstrap is a CSS library that was created by Twitter. It's by far the most popular responsive design framework. It's websites like Newsweek, Free Code Camp, and, of course, Twitter.", - "Go to http://www.codecademy.com/skills/make-a-website/topics/bootstrap-components and complete the section." + "Uncomment the h1, h2 and p elements.", + "Commenting is a way that you can leave comments within your code without affecting the code itself.", + "Commenting is also a convenient way to make code inactive without having to delete it entirely.", + "You can start a comment with <!-- and end a comment with -->." ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert(($('h1').length > 0), 'The h1 element should not commented. It should be visible in the browser.')", + "assert(($('h2').length > 0), 'The h2 element should not commented. It should be visible in the browser.')", + "assert(($('p').length > 0), 'The p element should not commented. It should be visible in the browser.')" + ], + "challengeSeed": [ + "" + ], + "challengeType": 0 }, { - "_id": "bd7112d8c441eddfaeb5bded", - "name": "Get Started with jQuery", - "difficulty": 0.13, - "challengeSeed": "125671865", + "_id": "bad87fee1348bd9aedf08804", + "name": "Comment out HTML", + "difficulty": 0.014, "description": [ - "jQuery is a powerful library built in JavaScript for manipulating HTML elements.", - "It's a lot easier to use than JavaScript itself, so we'll learn it first.", - "It's also extremely popular with employers, so we're going to learn it well.", - "Codecademy has an excellent free course that will walk us through the basics of jQuery.", - "Go to http://www.codecademy.com/courses/web-beginner-en-bay3D/0/1 and complete the first section." + "Comment out the h1 element and the p element, but leave the h2 element uncommented.", + "Remember that in order to start a comment, you need to use <!-- and to end a comment, you need to use -->.", + "Here you'll need to end the comment before the h2 element begins." ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert(($('h1').length == 0), 'The h1 element should be commented. It should not be visible in the browser.')", + "assert(($('h2').length > 0), 'The h2 element should not commented. It should be visible in the browser.')", + "assert(($('p').length == 0), 'The p element should be commented. It should not be visible in the browser.')" + ], + "challengeSeed": [ + "" + ], + "challengeType": 0 }, { - "_id": "bd7113d8c441eddfaeb5bdef", - "name": "Write Functions with jQuery", - "difficulty": 0.14, - "challengeSeed": "125658029", + "_id": "bad87fee1348bd9aedf08833", + "name": "Use Lorem Ipsum Text as a Placeholder", + "difficulty": 0.015, "description": [ - "Now we're ready to write your first jQuery functions.", - "Functions are little sub-programs. You can call a function and ask it to do something. Then it will return an answer.", - "First, you'll learn about one of the most important jQuery functions of all: $(document).ready().", - "Go to http://www.codecademy.com/courses/web-beginner-en-GfjC6/0/1 and complete the second section." + "Change the text in the p element to use the first few words of lorem ipsum text.", + "Web developers use lorem ipsum as placeholder text. It's called lorem ipsum text because it's those are the first two words of a passage by Cicero of Ancient Rome.", + "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", + "Here are the first 25 words of Lorem Ipsum text, which you can copy and paste into the right position: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert.isTrue((/Lorem(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p element should contain the first few words of the famous Lorem Ipsum text.')" + ], + "challengeSeed": [ + "

Hello World

", + "", + "

Cat Photo App

", + "", + "
", + "", + "

Hello Paragraph

" + ], + "challengeType": 0 }, { - "_id": "bd7114d8c441eddfaeb5bdef", - "name": "Harness Dynamic HTML", - "difficulty": 0.15, - "challengeSeed": "125658028", + "_id": "bad87fed1348bd9aedf08833", + "name": "Delete HTML Elements", + "difficulty": 0.016, "description": [ - "Did you know that you can create HTML elements using jQuery?", - "Let's learn some more advanced ways to use jQuery to manipulate the DOM.", - "Go to http://www.codecademy.com/courses/web-beginner-en-v6phg/0/1 and complete the third section." + "Delete the h1 and br elements so we can simplify our view.", + "Our phone doesn't have much space, for HTML elements.", + "Let's remove the unnecessary elements so we can start building our cat photo app." ], - "challengeType": 2, - "tests": [] + "tests": [ + "assert(($('h1').length == 0), 'Delete the h1 element.')", + "assert(($('h2').length > 0), 'Leave the h2 element on the page.')", + "assert(($('br').length == 0), 'Delete the br element.')", + "assert(($('p').length > 0), 'Leave the p element on the page.')" + ], + "challengeSeed": [ + "

Hello World

", + "", + "

Cat Photo App

", + "", + "
", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 }, { - "_id": "bd7115d8c441eddfaeb5bdef", - "name": "Listen for jQuery Events", - "difficulty": 0.16, - "challengeSeed": "125658027", + "_id": "bad87fee1348bd9aedf08803", + "name": "Change the Color of Text", + "difficulty": 0.017, "description": [ - "jQuery can listen for events, such as clicking a button, and respond to them.", - "Here we'll learn how to use the jQuery click() function to respond to events in the browser.", - "Go to http://www.codecademy.com/courses/web-beginner-en-JwhI1/0/1 and complete the fourth section." + "Change the h2 element's style so that its text color is red.", + "We can do this by changing the style of the h2 element.", + "The style responsible for the color of an element's text is the \"color\" style.", + "Here's how you would set the h2 element's text color to blue: <h2 style=\"color: blue\">cat photo app<h2>" ], - "challengeType": 2, - "tests": [] + "tests": [ + "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');" + ], + "challengeSeed": [ + "

hello world

", + "

cat photo app

", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 }, { - "_id": "bd7116d8c441eddfaeb5bdef", - "name": "Trigger jQuery Effects", - "difficulty": 0.17, - "challengeSeed": "125658025", + "_id": "bad87fee1348bd9aedf08805", + "name": "Create a Style Tag for CSS", + "difficulty": 0.018, "description": [ - "We can use jQuery to do all kinds of visual effects and transitions.", - "Let's explore some of the fun ways we can manipulate DOM elements with jQuery.", - "Go to http://www.codecademy.com/courses/web-beginner-en-jtFIC/0/1 and complete the fifth section." + "Create a style tag and write the CSS to make all h2 elements blue.", + "With CSS, there are hundreds of CSS attributes that you can use to change the way an element looks on a web page.", + "When you entered <h2 style=\"color: red\">hello html<h2>, you were giving that individual h2 element an inline style", + "That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).", + "At the top of your code, create a style tag like this: <style></style>", + "Inside that style element, you can create a global style for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2: {color: red;}</style>", + "Note that it's important to have an opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of the element's styles." ], - "challengeType": 2, - "tests": [] + "tests": [ + "expect($('h2')).to.have.css('color', 'rgb(0, 0, 255)');" + ], + "challengeSeed": [ + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aecf08806", + "name": "Use a CSS Class to Style an Element", + "difficulty": 0.0185, + "description": [ + "Create a CSS class called .red-text and apply it to the h2 element.", + "Classes are reusable styles that can be added to HTML elements.", + "Classes always start with a period. You can see that we've created a CSS class called .blue-text within the <style> tag.", + "You can follow that pattern to make a .red-text class, which you can attach to HTML elements by using the class=\"class\" within the relevant element's opening tag." + ], + "tests": [ + "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", + "expect($('h2')).to.have.class('red-text');" + ], + "challengeSeed": [ + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aeff08806", + "name": "Use a CSS Class to Style Multiple Elements", + "difficulty": 0.019, + "description": [ + "Apply the \"red-text\" class to the h1, h2 and p elements.", + "Remember that you can attach classes to HTML elements by using the class=\"class\" within the relevant element's opening tag." + ], + "tests": [ + "expect($('h1')).to.have.class('red-text');", + "expect($('h2')).to.have.class('red-text');", + "expect($('p')).to.have.class('red-text');", + "expect($('h1')).to.have.css('color', 'rgb(255, 0, 0)');", + "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", + "expect($('p')).to.have.css('color', 'rgb(255, 0, 0)');" + ], + "challengeSeed": [ + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08806", + "name": "Change the Font Size of an Element", + "difficulty": 0.020, + "description": [ + "Set the font size of all p elements to 16 pixels", + "Font size is controlled by the font-size CSS attribute.", + "We've already set the font-size attribute for all h2 elements. See if you can figure out how to give all p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for h1." + ], + "tests": [ + "expect($('p')).to.have.css('font-size', '16px');" + ], + "challengeSeed": [ + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08807", + "name": "Import a Google Font", + "difficulty": 0.021, + "description": [ + "Apply the font-family of Lobster to all h1 elements.", + "The first line of code in your text editor is a call to Google that grabs a font called Lobster and loads it into your HTML.", + "You'll notice that we've already applied the font-family of Lobster to all h2 elements. Now you should also apply it to all h1 elements." + ], + "tests": [ + "expect($('h1')).to.have.css('font-family', 'Lobster');" + ], + "challengeSeed": [ + "", + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08808", + "name": "Specify How Fonts Should Degrade", + "difficulty": 0.022, + "description": [ + "Make all h2 elements use Lobster as their font family, but degrade to the Serif font when the Lobster font isn't available.", + "We commented out our call to Google Fonts, and now our lobter isn't available.", + "You can leave Lobster as the font, and have it degrade to a different font if that font isn't available.", + "There are several default fonts that are availble in all browsers. These include Monospace, Serif and Sans-Serif. See if you can set the h2 elements to use Lobster and degrade to monospace." + ], + "tests": [ + "expect($('h2')).to.have.css('font-family').match(/serif/i);", + "expect($('h2')).to.have.css('font-family').match(/lobster/i);" + ], + "challengeSeed": [ + "", + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08809", + "name": "Using Important to Override Styles", + "difficulty": 0.023, + "description": [ + "Apply both the \"blue-text\" and \"urgently-red\" classes to all h2 elements, but use !important to ensure the element is rendered as being red.", + "Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.", + "If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.", + "There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use !important.", + "Look at the example in the editor's style tag to see how you can use !important.", + "Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations." + ], + "tests": [ + "expect($('h2')).to.have.class('urgently-red');", + "expect($('h2')).to.have.class('blue-text');", + "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');" + ], + "challengeSeed": [ + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08810", + "name": "Use Hex Codes for Precise Colors", + "difficulty": 0.024, + "description": [ + "Change the hex code in the \"red-text\" class to hex code for the color red.", + "Hexadecimal (hex) code is a popular way of specifying color in CSS.", + "Hex code is called \"hex\" because each digit has 16 possible values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f", + "The six hex code correspond to red-red-green-green-blue-blue.", + "You can change these six values to make more than 16 million colors!", + "The higher the value in a field, the more intense its color. For example, #000000 is black, #ffffff is white, and #00ff00 is bright green. You can also get less intense colors by using values lower than f. For example, #00f000 with the second green digit set to 0 is a light green, and #00f900 is a slightly brighter green", + "Now figure out how to make the bright green in the \"red-text\" class into a bright red." + ], + "tests": [ + "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", + "expect($('h2')).to.have.class('red-text');" + ], + "challengeSeed": [ + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9bedf08810", + "name": "Use Shortened 3 Digit Hex Codes", + "difficulty": 0.025, + "description": [ + "Change the hex code in the \"red-text\" class to the shortened 3-digit hex code for the color red.", + "You can also shorten the 6-digit color hex code to a 3-digit code. For example, #00ff00 becomes #0f0. This is less precise, but equally effective." + ], + "tests": [ + "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", + "expect($('h2')).to.have.class('red-text');" + ], + "challengeSeed": [ + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08811", + "name": "Use RGB Codes for Precise Colors", + "difficulty": 0.026, + "description": [ + "Change the RGB code to be red.", + "Another way to represent color in CSS is with RGB, or red-green-blue notation.", + "For each of the three colors, you specify a value between 0 and 256.", + "For example, black is rgb(0, 0, 0), white is rgb(255, 255, 255), bright green is rgb(0, 255, 0). You can also get less intense colors by using values lower than 255. For example, light green is rgb(0, 123, 0).", + "If you think about it, this is just as precise as using hex code, because 16 times 16 is 256. In practice, most developers use hex code since it's faster to say out loud and to type." + ], + "tests": [ + "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", + "expect($('h2')).to.have.class('red-text');" + ], + "challengeSeed": [ + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08812", + "name": "Add an Image to your Website", + "difficulty": 0.027, + "description": [ + "Use an img element to add the image http://bit.ly/cutegraycat to your website.", + "You can add images to your website by using the img element.", + "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>. Note that in most cases, img elements are self-closing.", + "Try it with this image: http://bit.ly/cutegraycat." + ], + "tests": [ + "expect($('img').attr('src')).to.equal('http://bit.ly/cutegraycat');" + ], + "challengeSeed": [ + "", + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9acdf08812", + "name": "Specify an Image Size TEST", + "difficulty": 0.028, + "description": [ + "Create a class called narrow-image and use it to resize the image so that it's only 200 pixels wide", + "Uh-oh, our image is too big to fit on a mobile phone. As a result, our user will need to scroll horizontally to view the image. But we can fix this by specifying an image size.", + "CSS has an attribute called width that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the images width.", + "Create a class called narrow-image and added it to the image element. Change the width to 200 pixels." + ], + "tests": [ + "expect($('img')).to.have.class('narrow-image');", + "expect($('img')).to.have.css('width', 200px)" + ], + "challengeSeed": [ + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9bedf08813", + "name": "Add a Border Around an Element", + "difficulty": 0.029, + "description": [ + "Create a class called \"thick-green-border\" that puts a 5-pixel-wide black border around your cat photo.", + "CSS Borders have attributes like style, color and width.", + "We've created an example border around your h1 element. See if you can add a 10-pixel-wide green border around your cat photo." + ], + "tests": [ + "expect($('img')).to.have.class('thick-green-border');", + "expect($('img')).to.have.css('border-color', 'rgb(0,255,0)'));", + "expect($('img')).to.have.css('border-width', '10px');" + ], + "challengeSeed": [ + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08814", + "name": "Add Rounded Corners with a Border Radius", + "difficulty": 0.030, + "description": [ + "Give your cat photo a border radius of 10 pixels.", + "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius.", + "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 10 pixels." + ], + "tests": [ + "expect($('img')).to.have.class('thick-green-border');", + "expect($('img')).to.have.css('border-radius', '10px');" + ], + "challengeSeed": [ + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08815", + "name": "Make an Image Circular with a Border Radius", + "difficulty": 0.031, + "description": [ + "Give your cat photo a border-radius of 50%.", + "In addition to pixels, you can also specify a border-radius of a percentage." + ], + "tests": [ + "expect($('img')).to.have.css('border-radius', '50%');" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08816", + "name": "Use an Anchor Tag to Link to an External Page", + "difficulty": 0.033, + "description": [ + "Create an anchor tag hyperlink that links to freecodecamp.com", + "" + ], + "tests": [ + "expect((/free(\\s+)?code(\\s+)?camp(\\s+)?/gi).test($('a').text())).to.be.true;", + "expect($('a').filter(function(index) { return /freecodecamp\\.com/gi.test($('a')[index]); }).length).to.eql(1);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "", + "
", + "This is a link to Google", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08817", + "name": "Make Named Anchors using the Hash Symbol", + "difficulty": 0.034, + "description": [ + "Use the hash symbol(#) to turn the link to the bottom of the page into a named anchor.", + "Sometimes you want to add anchor elements to your website before you know where they will link.", + "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", + "Replace the href in the link to freecodecamp.com with a hash symbol to turn it into a named anchor." + ], + "tests": [ + "expect((/this link leads nowhere/gi).test($('a').text())).to.be.true;", + "expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(1);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "", + "
", + "This named anchor leads nowhere", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08820", + "name": "Turn an Image into a Link", + "difficulty": 0.035, + "description": [ + "Wrap the gray cat's image with an anchor tag that leads nowhere.", + "You can make elements into links by wrapping them in an anchor tag.", + "Check out the example snow-colored cat's photo. When you hover over it with your cursor, you'll see the finger pointer you usually see when you hover over a link. The photo is now a link.", + "Wrap your gray cat's photo in an anchor tag", + "Use the hash symbol as the anchor tag's href." + ], + "tests": [ + "expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(2);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08818", + "name": "Add Alt Text to an image", + "difficulty": 0.036, + "description": [ + "Add the alt text \"a photo of a cute gray cat\" to our cat photo", + "alt text is what browsers will display if they fail to load the image. alt text is also important for blind or visually impaired users to understand what an image portrays. Search engines also look at alt text.", + "In short, every image should have alt text!", + "You can add alt text right in the image tag, like we've done here with the \"cute white cat\" image." + ], + "tests": [ + "expect($('img').filter(function(){ return /cat/gi.test(this.alt) }).length).to.eql(2);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "\"a", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad88fee1348bd9aedf08825", + "name": "Adjusting the Padding of an Element", + "difficulty": 0.037, + "description": [ + "Change the padding of the green box to match that of the red box.", + "An element's padding controls the amount of space between an element and its border.", + "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more padding than the green box.", + "When you increase the green box's padding, it will increase the distance between the word \"padding\" and the border around the text." + ], + "tests": [ + "expect($('.green-box')).to.have.css('padding', '20px')" + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08822", + "name": "Adjust the Margin of an Element", + "difficulty": 0.038, + "description": [ + "Change the margin of the green box to match that of the red box.", + "An element's margin controls the amount of space between an element's border and surrounding elements.", + "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.", + "When you increase the green box's padding, it will increase the distance between its border and surrounding elements." + ], + "tests": [ + "expect($('.green-box')).to.have.css('margin', '20px')" + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08823", + "name": "Add a Negative Margin to an Element", + "difficulty": 0.039, + "description": [ + "Change the margin of the green box to a negative value, so it fills the entire horizontal width of the blue box.", + "An element's margin controls the amount of space between an element's border and surrounding elements.", + "If you set an element's margin to a negative value, the element will grow larger.", + "Try to set the margin to a negative value like the one for the red box." + ], + "tests": [ + "expect($('.green-box')).to.have.css('margin', '-15px')" + ], + "challengeSeed": [ + "", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08824", + "name": "Add Different Padding to Each Side of an Element TEST", + "difficulty": 0.040, + "description": [ + "Give the green box a padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", + "Sometimes you will want to customize an element so that it has different padding on each of its sides.", + "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes." + ], + "tests": [ + "expect($('.green-box')).to.have.css('padding-bottom', '20px')", + "expect($('.green-box')).to.have.css('padding-left', '40px')" + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1248bd9aedf08824", + "name": "Add Different a Margin to Each Side of an Element TEST", + "difficulty": 0.041, + "description": [ + "Give the green box a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", + "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", + "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes." + ], + "tests": [ + "expect($('.green-box')).to.have.css('margin-bottom', '20px')", + "expect($('.green-box')).to.have.css('margin-left', '40px')" + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08826", + "name": "Use Clockwise Notation to Specify an Element's Padding", + "difficulty": 0.042, + "description": [ + "Use Clockwise Notation to give an element padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", + "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.", + "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", + "You can also use this notation for margins!" + ], + "tests": [ + "expect($('.green-box')).to.have.css('margin-bottom', '20px')", + "expect($('.green-box')).to.have.css('margin-left', '40px')" + ], + "challengeSeed": [ + "", + "
margin
", + "", + "
", + "
padding
", + "
padding
", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9acde08812", + "name": "Use Bootstrap for Responsive Images", + "difficulty": 0.043, + "description": [ + "Add the img-responsive Bootstrap class to the image.", + "Specifying a width of 200 pixels on our img element made it fit our phone's screen, but it's not a perfect fit. It would be great if the image could be exactly the width of our phone's screen.", + "Fortunately, there's a Responsive CSS Framework called written by Twitter called Bootstrap. You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML, but we've gone ahead and included it for you here.", + "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", + "Now all you need to do is add the img-responsive class to your image." + ], + "tests": [ + "expect($('img')).to.have.class('img-responsive');" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "This is a link to Google", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd8acde08812", + "name": "Center Text with Bootstrap", + "difficulty": 0.044, + "description": [ + "Add Bootstrap's text-center class to your h2 element.", + "Now that we're using Bootstrap, we can center our heading elements (h2) to make them look better. All we need to do is add the class text-center to the h1 and h2 elements.", + "Note that you can add several classes to the same element by seperating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>." + ], + "tests": [ + "expect($('h2')).to.have.class('text-center');" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348cd8acde08812", + "name": "Create a Button", + "difficulty": 0.045, + "description": [ + "Create a button with the text \"Delete\" using the HTML button element.", + "HTML has special elements that function like links, but look like buttons. Let's creating a default HTML button." + ], + "tests": [ + "expect((/delete/gi).test($('button').text())).to.be.true;" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "", + "
" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348cd8acdf08812", + "name": "Create a Bootstrap Button", + "difficulty": 0.046, + "description": [ + "Apply the Bootstrap's btn class to both of your buttons.", + "Bootstrap has its own button styles, which look much better than the plain HTML ones." + ], + "tests": [ + "expect($('.btn').length).to.eql(2);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "", + "
", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348cd8acef08812", + "name": "Create a Block Element Bootstrap Button", + "difficulty": 0.047, + "description": [ + "Add Bootstrap's btn-block class to both of your buttons.", + "Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", + "Note that these buttons still need the btn class." + ], + "tests": [ + "expect($('.btn-block').length).to.eql(2);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "", + "
", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348cd8acef08811", + "name": "Color a Bootstrap Button with Button Primary", + "difficulty": 0.048, + "description": [ + "Add Bootstrap's btn-block class to both of your buttons.", + "Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", + "Note that these buttons still need the btn class." + ], + "tests": [ + "expect($('.btn-block').length).to.eql(2);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "", + "
", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348cd8acef08813", + "name": "Color a Bootstrap Button with Button Info", + "difficulty": 0.049, + "description": [ + "Add Bootstrap's btn-primary class to both of your buttons.", + "Bootstrap comes with several pre-defined colors for buttons. The btn-primary class is the main button color you'll use throughout your app.", + "Note that these buttons still need the btn and btn-block classes." + ], + "tests": [ + "expect($('.btn-primary').length).to.eql(2);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "", + "
", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348ce8acef08814", + "name": "Warn your Users of a Dangerous Action with the Bootstrap Button Danger Class", + "difficulty": 0.050, + "description": [ + "Change the \"Delete\" button from btn-primary to btn-danger.", + "Bootstrap comes with several pre-defined colors for buttons. The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.", + "Note that this button still needs the btn and btn-block classes." + ], + "tests": [ + "expect($('.btn-danger').length).to.eql(1);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "", + "
", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad88fee1348ce8acef08815", + "name": "Use the Bootstrap Grid to Put Two Elements Side By Side", + "difficulty": 0.051, + "description": [ + "Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"row\"> element.", + "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", + "The row class is applied to a div, and the buttons themselves can be nested within it." + ], + "tests": [ + "expect($('.row').length).to.eql(2);", + "expect($('.col-xs-12').length).to.eql(4);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "
", + "
", + " ", + "
", + "
", + " ", + "
", + "
", + "", + "
", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad89fee1348ce8acef08816", + "name": "Wrap Side By Side Elements in a Bootstrap Row", + "difficulty": 0.052, + "description": [ + "Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"row\"> element.", + "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", + "The row class is applied to a div, and the buttons themselves can be nested within it." + ], + "tests": [ + "expect($('.row').length).to.eql(2);", + "expect($('.col-xs-12').length).to.eql(4);" + ], + "challengeSeed": [ + "", + "

cat photo app

", + "", + "
", + "
", + "
", + " ", + "
", + "
", + " ", + "
", + "
", + "", + "
", + "" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aedf08813", + "name": "Add Alt Text to an Image TEST", + "difficulty": 0.053, + "description": [ + "Add the alt text \"A picture of a gray cat\" to the image.", + "Alt text is a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.", + "You can add alt text right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>." + ], + "tests": [ + "expect((/cat/gi).test($('img').attr('alt')).to.be.true;" + ], + "challengeSeed": [ + "", + "

hello world

", + "

cat photo app

", + "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "" + ], + "challengeType": 0 }, { "_id": "bd7123d8c441eddfaeb5bdef", diff --git a/seed_data/future-coursewares.json b/seed_data/future-coursewares.json index badb123236..0967ef424b 100644 --- a/seed_data/future-coursewares.json +++ b/seed_data/future-coursewares.json @@ -1,2588 +1 @@ -[ - { - "_id" : "bd7123d8c441eddfaeb5bdef", - "name": "Learn how Free Code Camp Works", - "difficulty": 0.00, - "description": [ - "Watch this 90 second video, or simply read this summary:", - "Welcome to Free Code Camp. We're a community of busy people learning to code.", - "We built this community because learning to code is hard. But anyone who can stay motivated can learn to code. And the best way to stay motivated is to code with friends.", - "To maximize accessibility, all our challenges are self-paced, browser-based, and free.", - "All of us start with the same 100 hours of interactive coding challenges. These cover Computer Science and databases. They also cover in-demand JavaScript tools like jQuery, Node.js and MongoDB.", - "Once we have a basic understanding of web development, we'll spend another 900 hours putting that theory into practice. We'll build full stack solutions for nonprofits.", - "By the end of this process, we'll be good at coding. We'll have a portfolio of apps with happy users to prove it. We'll also have an alumni network of fellow coders and nonprofits ready to serve as references.", - "If you make it through Free Code Camp, you will be able to get a coding job. There are far more job openings out there than there are qualified coders to fill them.", - "Also, for every pure coding job, there are at least 5 additional jobs that require some coding skills. So even if you decide not to pursue coding as a career, you'll still walk away with a valuable job skill.", - "There are 3 keys to succeeding in our community: do the challenges, make friends, and find a routine.", - "Now it's time to join our chatroom. Click the \"Go to my next challenge\" button to move on to your next challenge." - ], - "tests": [ - "" - ], - "challengeSeed": [ - "114486344" - ], - "challengeType" : 2 - }, - { - "_id": "bd7123c8c441eddfaeb5bdef", - "name": "Meet Booleans", - "difficulty": "0.001", - "description": [ - "Return true" - ], - "tests": [ - "expect(welcomeToBooleans()).to.be.a(\"boolean\");", - "expect(welcomeToBooleans()).to.be.true;" - ], - "challengeSeed": [ - "function welcomeToBooleans() {\n // Good luck!\n return false;\n}\n\nwelcomeToBooleans();" - ], - "challengeType": 1 - }, - { - "_id" : "bd7123c8c441eddfaeb5bdef", - "name": "Start our Challenges", - "difficulty": "0.002", - "description": [ - "Welcome to Free Code Camp's first challenge! Click on the button below for further instructions.", - "Awesome. Now you can read the rest of this challenge's instructions.", - "You can edit code in the text editor we've embedded into this web page.", - "Do you see the code in the text editor that says <h1>hello</h1>? That's an HTML element.", - "Most HTML elements have an opening tag and a closing tag. Opening tags look like this: <h1>. Closing tags look like this: </h1>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.", - "Once you've completed the challenge, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.", - "To enable the \"Go to my next challenge\" button on this exercise, change the h1 tag's text to say \"Hello World\" instead of \"Hello\"." - ], - "tests": [ - "expect((/hello(\\s)+world/gi).test($('h1').text())).to.be.true;" - ], - "challengeSeed": [ - "

Hello

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf0887a", - "name": "Use the h2 Element", - "difficulty" : "0.01", - "description": [ - "Add an h2 tag that says \"cat photo app\" to make a second HTML element below the \"hello world\" h1 element.", - "The h2 element you enter will create an h2 element on the website.", - "This element tells the browser how to render the text that it contains.", - "h2 elements are slightly smaller than h1 elements. There are also h3, h4, h5 and h6 elements." - ], - "tests": [ - "expect((/hello(\\s)+world/gi).test($('h1').text())).to.be.true;", - "expect((/cat(\\s)+photo(\\s)+app/gi).test($('h2').text())).to.be.true;" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08801", - "name": "Use the P Element", - "difficulty" : "0.02", - "description": [ - "Create a p element below the h2 element, and give it the text \"hello paragraph\".", - "p elements are the preferred element for normal-sized paragraph text on websites.", - "You can create a p element like so: <p>I'm a p tag!</p>" - ], - "tests": [ - "expect((/hello(\\s)+paragraph/gi).test($('p').text())).to.be.true;" - ], - "challengeSeed": [ - "

hello world

", - "

hello html

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aeaf08801", - "name": "Add a Line Break to Visually Separate Elements", - "difficulty" : "0.03", - "description": [ - "Add a line break between the <h2> and <p> elements.", - "You can create an line break element with <br/>.", - "Note that <br/> has no closing tag. It is a self-closing element. See how a forward-slash precedes the closing bracket?" - ], - "tests": [ - "expect($('br')).to.exist;" - ], - "challengeSeed": [ - "

hello world

", - "

hello html

", - "

hello paragraph

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08802", - "name": "Uncomment HTML", - "difficulty" : "0.04", - "description": [ - "Uncomment the h1, h2 and p elements.", - "Commenting is a way that you can leave comments within your code without affecting the code itself.", - "Commenting is also a convenient way to make code inactive without having to delete it entirely.", - "You can start a comment with <!-- and end a comment with -->." - ], - "tests": [ - "expect((/hello(\\s)+world/gi).test($('h1').text())).to.be.true;" - ], - "challengeSeed": [ - "", - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08809", - "name": "Using Important to Override Styles", - "difficulty" : "0.14", - "description": [ - "Apply both the \"blue-text\" and \"urgently-red\" classes to all h2 elements, but use !important to ensure the element is rendered as being red.", - "Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.", - "If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.", - "There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use !important.", - "Look at the example in the editor's style tag to see how you can use !important.", - "Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations." - ], - "tests": [ - "expect($('h2')).to.have.class('urgently-red');", - "expect($('h2')).to.have.class('blue-text');", - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08810", - "name": "Use Hex Codes for Precise Colors", - "difficulty" : "0.15", - "description": [ - "Change the hex code in the \"red-text\" class to hex code for the color red.", - "Hexadecimal (hex) code is a popular way of specifying color in CSS.", - "Hex code is called \"hex\" because each digit has 16 possible values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f", - "The six hex code correspond to red-red-green-green-blue-blue.", - "You can change these six values to make more than 16 million colors!", - "The higher the value in a field, the more intense its color. For example, #000000 is black, #ffffff is white, and #00ff00 is bright green. You can also get less intense colors by using values lower than f. For example, #00f000 with the second green digit set to 0 is a light green, and #00f900 is a slightly brighter green", - "Now figure out how to make the bright green in the \"red-text\" class into a bright red." - ], - "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9bedf08810", - "name": "Use Shortened 3 Digit Hex Codes", - "difficulty" : "0.16", - "description": [ - "Change the hex code in the \"red-text\" class to the shortened 3-digit hex code for the color red.", - "You can also shorten the 6-digit color hex code to a 3-digit code. For example, #00ff00 becomes #0f0. This is less precise, but equally effective." - ], - "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08811", - "name": "Use RGB Codes for Precise Colors", - "difficulty" : "0.17", - "description": [ - "Change the RGB code to be red.", - "Another way to represent color in CSS is with RGB, or red-green-blue notation.", - "For each of the three colors, you specify a value between 0 and 256.", - "For example, black is rgb(0, 0, 0), white is rgb(255, 255, 255), bright green is rgb(0, 255, 0). You can also get less intense colors by using values lower than 255. For example, light green is rgb(0, 123, 0).", - "If you think about it, this is just as precise as using hex code, because 16 times 16 is 256. In practice, most developers use hex code since it's faster to say out loud and to type." - ], - "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08812", - "name": "Add an Image to your Website", - "difficulty" : "0.18", - "description": [ - "Use an img element to add the image http://bit.ly/cutegraycat to your website.", - "You can add images to your website by using the img element.", - "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>. Note that in most cases, img elements are self-closing.", - "Try it with this image: http://bit.ly/cutegraycat." - ], - "tests": [ - "expect($('img').attr('src')).to.equal('http://bit.ly/cutegraycat');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9acdf08812", - "name": "Specify an Image Size TEST", - "difficulty" : "0.19", - "description": [ - "Create a class called narrow-image and use it to resize the image so that it's only 200 pixels wide", - "Uh-oh, our image is too big to fit on a mobile phone. As a result, our user will need to scroll horizontally to view the image. But we can fix this by specifying an image size.", - "CSS has an attribute called width that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the images width.", - "Create a class called narrow-image and added it to the image element. Change the width to 200 pixels." - ], - "tests": [ - "expect($('img')).to.have.class('narrow-image');", - "expect($('img')).to.have.css('width', 200px)" - ], - "challengeSeed": [ - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9bedf08813", - "name": "Add a Border Around an Element", - "difficulty" : "0.20", - "description": [ - "Create a class called \"thick-green-border\" that puts a 5-pixel-wide black border around your cat photo.", - "CSS Borders have attributes like style, color and width.", - "We've created an example border around your h1 element. See if you can add a 10-pixel-wide green border around your cat photo." - ], - "tests": [ - "expect($('img')).to.have.class('thick-green-border');", - "expect($('img')).to.have.css('border-color', 'rgb(0,255,0)'));", - "expect($('img')).to.have.css('border-width', '10px');" - ], - "challengeSeed": [ - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08814", - "name": "Add Rounded Corners with a Border Radius", - "difficulty" : "0.21", - "description": [ - "Give your cat photo a border radius of 10 pixels.", - "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius.", - "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 10 pixels." - ], - "tests": [ - "expect($('img')).to.have.class('thick-green-border');", - "expect($('img')).to.have.css('border-radius', '10px');" - ], - "challengeSeed": [ - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08815", - "name": "Make an Image Circular with a Border Radius", - "difficulty" : "0.22", - "description": [ - "Give your cat photo a border-radius of 50%.", - "In addition to pixels, you can also specify a border-radius of a percentage." - ], - "tests": [ - "expect($('img')).to.have.css('border-radius', '50%');" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08816", - "name": "Use an Anchor Tag to Link to an External Page", - "difficulty" : "0.23", - "description": [ - "Create an anchor tag hyperlink that links to freecodecamp.com", - "" - ], - "tests": [ - "expect((/free(\\s+)?code(\\s+)?camp(\\s+)?/gi).test($('a').text())).to.be.true;", - "expect($('a').filter(function(index) { return /freecodecamp\\.com/gi.test($('a')[index]); }).length).to.eql(1);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "", - "
", - "This is a link to Google", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08817", - "name": "Make Named Anchors using the Hash Symbol", - "difficulty" : "0.24", - "description": [ - "Use the hash symbol(#) to turn the link to the bottom of the page into a named anchor.", - "Sometimes you want to add anchor elements to your website before you know where they will link.", - "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", - "Replace the href in the link to freecodecamp.com with a hash symbol to turn it into a named anchor." - ], - "tests": [ - "expect((/this link leads nowhere/gi).test($('a').text())).to.be.true;", - "expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(1);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "", - "
", - "This named anchor leads nowhere", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08820", - "name": "Turn an Image into a Link", - "difficulty" : "0.25", - "description": [ - "Wrap the gray cat's image with an anchor tag that leads nowhere.", - "You can make elements into links by wrapping them in an anchor tag.", - "Check out the example snow-colored cat's photo. When you hover over it with your cursor, you'll see the finger pointer you usually see when you hover over a link. The photo is now a link.", - "Wrap your gray cat's photo in an anchor tag", - "Use the hash symbol as the anchor tag's href." - ], - "tests": [ - "expect($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length).to.eql(2);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08818", - "name": "Add Alt Text to an image", - "difficulty" : "0.26", - "description": [ - "Add the alt text \"a photo of a cute gray cat\" to our cat photo", - "alt text is what browsers will display if they fail to load the image. alt text is also important for blind or visually impaired users to understand what an image portrays. Search engines also look at alt text.", - "In short, every image should have alt text!", - "You can add alt text right in the image tag, like we've done here with the \"cute white cat\" image." - ], - "tests": [ - "expect($('img').filter(function(){ return /cat/gi.test(this.alt) }).length).to.eql(2);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "\"a", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad88fee1348bd9aedf08825", - "name": "Adjusting the Padding of an Element", - "difficulty" : "0.27", - "description": [ - "Change the padding of the green box to match that of the red box.", - "An element's padding controls the amount of space between an element and its border.", - "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more padding than the green box.", - "When you increase the green box's padding, it will increase the distance between the word \"padding\" and the border around the text." - ], - "tests": [ - "expect($('.green-box')).to.have.css('padding', '20px')" - ], - "challengeSeed": [ - "", - "
margin
", - "", - "
", - "
padding
", - "
padding
", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08822", - "name": "Adjust the Margin of an Element", - "difficulty" : "0.28", - "description": [ - "Change the margin of the green box to match that of the red box.", - "An element's margin controls the amount of space between an element's border and surrounding elements.", - "Here, we can see that the green box and the red box and the green box are nested within the yellow box. Note that the red box has more margin than the green box, making it appear smaller.", - "When you increase the green box's padding, it will increase the distance between its border and surrounding elements." - ], - "tests": [ - "expect($('.green-box')).to.have.css('margin', '20px')" - ], - "challengeSeed": [ - "", - "
margin
", - "", - "
", - "
padding
", - "
padding
", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08823", - "name": "Add a Negative Margin to an Element", - "difficulty" : "0.29", - "description": [ - "Change the margin of the green box to a negative value, so it fills the entire horizontal width of the blue box.", - "An element's margin controls the amount of space between an element's border and surrounding elements.", - "If you set an element's margin to a negative value, the element will grow larger.", - "Try to set the margin to a negative value like the one for the red box." - ], - "tests": [ - "expect($('.green-box')).to.have.css('margin', '-15px')" - ], - "challengeSeed": [ - "", - "", - "
", - "
padding
", - "
padding
", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08824", - "name": "Add Different Padding to Each Side of an Element TEST", - "difficulty" : "0.30", - "description": [ - "Give the green box a padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", - "Sometimes you will want to customize an element so that it has different padding on each of its sides.", - "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes." - ], - "tests": [ - "expect($('.green-box')).to.have.css('padding-bottom', '20px')", - "expect($('.green-box')).to.have.css('padding-left', '40px')" - ], - "challengeSeed": [ - "", - "
margin
", - "", - "
", - "
padding
", - "
padding
", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1248bd9aedf08824", - "name": "Add Different a Margin to Each Side of an Element TEST", - "difficulty" : "0.31", - "description": [ - "Give the green box a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", - "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", - "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes." - ], - "tests": [ - "expect($('.green-box')).to.have.css('margin-bottom', '20px')", - "expect($('.green-box')).to.have.css('margin-left', '40px')" - ], - "challengeSeed": [ - "", - "
margin
", - "", - "
", - "
padding
", - "
padding
", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08826", - "name": "Use Clockwise Notation to Specify an Element's Padding", - "difficulty" : "0.32", - "description": [ - "Use Clockwise Notation to give an element padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", - "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.", - "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", - "You can also use this notation for margins!" - ], - "tests": [ - "expect($('.green-box')).to.have.css('margin-bottom', '20px')", - "expect($('.green-box')).to.have.css('margin-left', '40px')" - ], - "challengeSeed": [ - "", - "
margin
", - "", - "
", - "
padding
", - "
padding
", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9acde08812", - "name": "Use Bootstrap for Responsive Images", - "difficulty" : "0.33", - "description": [ - "Add the img-responsive Bootstrap class to the image.", - "Specifying a width of 200 pixels on our img element made it fit our phone's screen, but it's not a perfect fit. It would be great if the image could be exactly the width of our phone's screen.", - "Fortunately, there's a Responsive CSS Framework called written by Twitter called Bootstrap. You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/> at the top of your HTML, but we've gone ahead and included it for you here.", - "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", - "Now all you need to do is add the img-responsive class to your image." - ], - "tests": [ - "expect($('img')).to.have.class('img-responsive');" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "This is a link to Google", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd8acde08812", - "name": "Center Text with Bootstrap", - "difficulty" : "0.34", - "description": [ - "Add Bootstrap's text-center class to your h2 element.", - "Now that we're using Bootstrap, we can center our heading elements (h2) to make them look better. All we need to do is add the class text-center to the h1 and h2 elements.", - "Note that you can add several classes to the same element by seperating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>." - ], - "tests": [ - "expect($('h2')).to.have.class('text-center');" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348cd8acde08812", - "name": "Create a Button", - "difficulty" : "0.35", - "description": [ - "Create a button with the text \"Delete\" using the HTML button element.", - "HTML has special elements that function like links, but look like buttons. Let's creating a default HTML button." - ], - "tests": [ - "expect((/delete/gi).test($('button').text())).to.be.true;" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "", - "
" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348cd8acdf08812", - "name": "Create a Bootstrap Button", - "difficulty" : "0.36", - "description": [ - "Apply the Bootstrap's btn class to both of your buttons.", - "Bootstrap has its own button styles, which look much better than the plain HTML ones." - ], - "tests": [ - "expect($('.btn').length).to.eql(2);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "", - "
", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348cd8acef08812", - "name": "Create a Block Element Bootstrap Button", - "difficulty" : "0.37", - "description": [ - "Add Bootstrap's btn-block class to both of your buttons.", - "Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", - "Note that these buttons still need the btn class." - ], - "tests": [ - "expect($('.btn-block').length).to.eql(2);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "", - "
", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348cd8acef08812", - "name": "Color a Bootstrap Button with Button Primary", - "difficulty" : "0.38", - "description": [ - "Add Bootstrap's btn-block class to both of your buttons.", - "Normally, your buttons are only as wide as the text they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.", - "Note that these buttons still need the btn class." - ], - "tests": [ - "expect($('.btn-block').length).to.eql(2);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "", - "
", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348cd8acef08812", - "name": "Color a Bootstrap Button with Button Primary", - "difficulty" : "0.39", - "description": [ - "Add Bootstrap's btn-primary class to both of your buttons.", - "Bootstrap comes with several pre-defined colors for buttons. The btn-primary class is the main button color you'll use throughout your app.", - "Note that these buttons still need the btn and btn-block classes." - ], - "tests": [ - "expect($('.btn-primary').length).to.eql(2);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "", - "
", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348ce8acef08812", - "name": "Warn your Users of a Dangerous Action with the Bootstrap Button Danger Class", - "difficulty" : "0.40", - "description": [ - "Change the \"Delete\" button from btn-primary to btn-danger.", - "Bootstrap comes with several pre-defined colors for buttons. The btn-danger class is the button color you'll use to notify users that the button performs a destructive action, such as deleting a cat photo.", - "Note that this button still needs the btn and btn-block classes." - ], - "tests": [ - "expect($('.btn-danger').length).to.eql(1);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "", - "
", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad88fee1348ce8acef08812", - "name": "Use the Bootstrap Grid to Put Two Elements Side By Side", - "difficulty" : "0.41", - "description": [ - "Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"row\"> element.", - "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", - "The row class is applied to a div, and the buttons themselves can be nested within it." - ], - "tests": [ - "expect($('.row').length).to.eql(2);", - "expect($('.col-xs-12').length).to.eql(4);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "
", - "
", - " ", - "
", - "
", - " ", - "
", - "
", - "", - "
", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad89fee1348ce8acef08812", - "name": "Wrap Side By Side Elements in a Bootstrap Row", - "difficulty" : "0.42", - "description": [ - "Put the \"Like\" and \"Delete\" buttons side-by-side by wrapping them in both in a <div class=\"row\"> element and each of them in a <div class=\"row\"> element.", - "Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.", - "The row class is applied to a div, and the buttons themselves can be nested within it." - ], - "tests": [ - "expect($('.row').length).to.eql(2);", - "expect($('.col-xs-12').length).to.eql(4);" - ], - "challengeSeed": [ - "", - "

cat photo app

", - "", - "
", - "
", - "
", - " ", - "
", - "
", - " ", - "
", - "
", - "", - "
", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08813", - "name": "Add Alt Text to an Image TEST", - "difficulty" : "0.43", - "description": [ - "Add the alt text \"A picture of a gray cat\" to the image.", - "Alt text is a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.", - "You can add alt text right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>." - ], - "tests": [ - "expect((/cat/gi).test($('img').attr('alt')).to.be.true;" - ], - "challengeSeed": [ - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08827", - "name": "Create an Bulleted Unordered List", - "difficulty" : "0.44", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08828", - "name": "Created a Numbered Ordered List", - "difficulty" : "0.45", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08829", - "name": "Create a Text Field", - "difficulty" : "0.46", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08830", - "name": "Use HTML5 to Make a Field Required", - "difficulty" : "0.47", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08831", - "name": "Use HTML5 to Specify an Input Type", - "difficulty" : "0.49", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08832", - "name": "Create a Text Area", - "difficulty" : "0.50", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08834", - "name": "Create a Set of Radio Buttons", - "difficulty" : "0.51", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08835", - "name": "Create a Set of Checkboxes", - "difficulty" : "0.52", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08836", - "name": "Create a HTML Form", - "difficulty" : "0.53", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08841", - "name": "Change the background of element", - "difficulty" : "0.54", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08842", - "name": "Make an element translucent", - "difficulty" : "0.55", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08844", - "name": "Add a Drop Shadow", - "difficulty" : "0.56", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08845", - "name": "Make a Navbar", - "difficulty" : "0.57", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08847", - "name": "Add a Logo to a Navbar", - "difficulty" : "0.58", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08848", - "name": "Make a Footer", - "difficulty" : "0.59", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08849", - "name": "Use Icons as Links", - "difficulty" : "0.60", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08850", - "name": "Add Hover Effects to Icons", - "difficulty" : "0.61", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08851", - "name": "Add Depth to a Page with a Well", - "difficulty" : "0.62", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08852", - "name": "Add an ID to a Button", - "difficulty" : "0.52", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08853", - "name": "Fire a Modal by Clicking a Button", - "difficulty" : "0.63", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08854", - "name": "Style a Modal with a Header", - "difficulty" : "0.64", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08855", - "name": "Style a Modal with a Body", - "difficulty" : "0.65", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08856", - "name": "Make a Modal Dismissable", - "difficulty" : "0.66", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08857", - "name": "Create an Accordian Menu", - "difficulty" : "0.67", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08863", - "name": "Add a Gradient to a Button", - "difficulty" : "0.68", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08864", - "name": "Adjust the Line Height of Text", - "difficulty" : "0.69", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08866", - "name": "", - "difficulty" : "0.70", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08867", - "name": "", - "difficulty" : "0.71", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08868", - "name": "", - "difficulty" : "0.711", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08869", - "name": "", - "difficulty" : "0.712", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08870", - "name": "", - "difficulty" : "0.713", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08871", - "name": "", - "difficulty" : "0.714", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08872", - "name": "", - "difficulty" : "0.72", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08873", - "name": "", - "difficulty" : "0.73", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08874", - "name": "", - "difficulty" : "0.74", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08875", - "name": "", - "difficulty" : "0.75", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08876", - "name": "", - "difficulty" : "0.76", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08877", - "name": "", - "difficulty" : "0.77", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08878", - "name": "", - "difficulty" : "0.78", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08879", - "name": "", - "difficulty" : "0.79", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08880", - "name": "", - "difficulty" : "0.80", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08881", - "name": "", - "difficulty" : "0.81", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08882", - "name": "", - "difficulty" : "0.82", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08883", - "name": "", - "difficulty" : "0.83", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08884", - "name": "", - "difficulty" : "0.84", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08885", - "name": "", - "difficulty" : "0.85", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08886", - "name": "", - "difficulty" : "0.86", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08887", - "name": "", - "difficulty" : "0.87", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08888", - "name": "", - "difficulty" : "0.88", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08889", - "name": "", - "difficulty" : "0.89", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08890", - "name": "", - "difficulty" : "0.90", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08891", - "name": "", - "difficulty" : "0.91", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08892", - "name": "", - "difficulty" : "0.92", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08893", - "name": "", - "difficulty" : "0.93", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08894", - "name": "", - "difficulty" : "0.94", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08895", - "name": "", - "difficulty" : "0.95", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08896", - "name": "", - "difficulty" : "0.96", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08897", - "name": "", - "difficulty" : "0.97", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08898", - "name": "", - "difficulty" : "0.98", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08899", - "name": "", - "difficulty" : "0.99", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - }, - - { - "_id" : "bad87fee1348bd9aedf08100", - "name": "", - "difficulty" : "1.00", - "description": [ - "", - "" - ], - "tests": [ - "expect($('h1')).to.have.class('text-center');", - "expect($('h1')).to.have.text('hello world');" - ], - "challengeSeed": [ - "

hello world

" - ], - "challengeType": 0 - } - -] +{} From da9ac03a341510cd95a72d5cd5714c386ea2a8e7 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Mon, 11 May 2015 13:58:59 -0700 Subject: [PATCH 02/17] created a chai test for css attributes --- seed_data/coursewares.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index e27ab751f7..a260ea7af5 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -333,11 +333,11 @@ "Here's how you would set the h2 element's text color to blue: <h2 style=\"color: blue\">cat photo app<h2>" ], "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');" + "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')" ], "challengeSeed": [ - "

hello world

", - "

cat photo app

", + "

Cat Photo App

", + "", "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" ], "challengeType": 0 From 2091f65dfdb4a7df31f9b25428b1284e0509ea51 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Mon, 11 May 2015 14:27:29 -0700 Subject: [PATCH 03/17] more courseware improvements --- seed_data/coursewares.json | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index a260ea7af5..027ac56e6e 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -347,21 +347,22 @@ "name": "Create a Style Tag for CSS", "difficulty": 0.018, "description": [ - "Create a style tag and write the CSS to make all h2 elements blue.", + "Create remove your h2 element's style tag and write the CSS to make all h2 elements blue.", "With CSS, there are hundreds of CSS attributes that you can use to change the way an element looks on a web page.", - "When you entered <h2 style=\"color: red\">hello html<h2>, you were giving that individual h2 element an inline style", + "When you entered <h2 style=\"color: red\">Cat Photo App<h2>, you were giving that individual h2 element an inline style", "That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).", "At the top of your code, create a style tag like this: <style></style>", "Inside that style element, you can create a global style for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2: {color: red;}</style>", "Note that it's important to have an opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of the element's styles." ], "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(0, 0, 255)');" + "assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your h2 element should be blue.')", + "assert(!$('h2').attr('style'), 'You should remove the style attribute from your h2 element.')" ], "challengeSeed": [ - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" ], "challengeType": 0 }, From 4d0017a4d45542c8ffd9f15956c0b5515a8c92e0 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Mon, 11 May 2015 23:40:04 -0700 Subject: [PATCH 04/17] bower install jshint and build more coursewares --- bower.json | 3 +- seed_data/coursewares.json | 156 +++++++++++++++++++++----------- views/bonfire/show.jade | 2 +- views/coursewares/showHTML.jade | 2 +- views/coursewares/showJS.jade | 2 +- 5 files changed, 107 insertions(+), 58 deletions(-) diff --git a/bower.json b/bower.json index 0d92dd37c2..cd8cfd5cf3 100644 --- a/bower.json +++ b/bower.json @@ -25,6 +25,7 @@ "font-awesome": "~4.3.0", "moment": "~2.10.2", "angular-bootstrap": "~0.13.0", - "ramda": "~0.13.0" + "ramda": "~0.13.0", + "jshint": "~2.7.0" } } diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index 027ac56e6e..2a9a2e9288 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -277,13 +277,14 @@ "name": "Use Lorem Ipsum Text as a Placeholder", "difficulty": 0.015, "description": [ - "Change the text in the p element to use the first few words of lorem ipsum text.", - "Web developers use lorem ipsum as placeholder text. It's called lorem ipsum text because it's those are the first two words of a passage by Cicero of Ancient Rome.", - "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", - "Here are the first 25 words of Lorem Ipsum text, which you can copy and paste into the right position: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + "Change the text in the p element to use the first few words of Kitty Ipsum text.", + "Web developers traditionally use Lorem Ipsum as placeholder text. It's called Lorem Ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.", + "Lorem Ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.", + "Well, 5 centuries is long enough. Since we're building a cat photo app, let's use something called Kitty Ipsum!", + "Here are the first few words of Kitty Ipsum text, which you can copy and paste into the right position: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff." ], "tests": [ - "assert.isTrue((/Lorem(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p element should contain the first few words of the famous Lorem Ipsum text.')" + "assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your p element should contain the first few words of the famous Kitty Ipsum text.')" ], "challengeSeed": [ "

Hello World

", @@ -352,7 +353,7 @@ "When you entered <h2 style=\"color: red\">Cat Photo App<h2>, you were giving that individual h2 element an inline style", "That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).", "At the top of your code, create a style tag like this: <style></style>", - "Inside that style element, you can create a global style for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2: {color: red;}</style>", + "Inside that style element, you can create a global style for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2 {color: red;}</style>", "Note that it's important to have an opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of the element's styles." ], "tests": [ @@ -373,40 +374,42 @@ "description": [ "Create a CSS class called .red-text and apply it to the h2 element.", "Classes are reusable styles that can be added to HTML elements.", + "Here's the anatomy of a CSS class:", + "", "Classes always start with a period. You can see that we've created a CSS class called .blue-text within the <style> tag.", - "You can follow that pattern to make a .red-text class, which you can attach to HTML elements by using the class=\"class\" within the relevant element's opening tag." + "You can apply a class to an element like this: <h2 class=\"blue-text\">Cat Photo App<h2>", + "Instead of creating a new Style tag, try removing the h2 style declaration from the existing style element, and replace it with the class declaration for \".red-text\"." ], "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" + "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", + "assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')" ], "challengeSeed": [ "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "", + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" ], "challengeType": 0 }, { - "_id": "bad87fee1348bd9aeff08806", + "_id": "bad87fee1348bd9aefe08806", "name": "Use a CSS Class to Style Multiple Elements", "difficulty": 0.019, "description": [ - "Apply the \"red-text\" class to the h1, h2 and p elements.", + "Apply the \"red-text\" class to the h2 and p elements.", "Remember that you can attach classes to HTML elements by using the class=\"class\" within the relevant element's opening tag." ], "tests": [ - "expect($('h1')).to.have.class('red-text');", - "expect($('h2')).to.have.class('red-text');", - "expect($('p')).to.have.class('red-text');", - "expect($('h1')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('p')).to.have.css('color', 'rgb(255, 0, 0)');" + "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", + "assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')", + "assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", + "assert($('p').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')" ], "challengeSeed": [ "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "", + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" ], "challengeType": 0 }, @@ -426,23 +430,54 @@ "difficulty": 0.020, "description": [ "Set the font size of all p elements to 16 pixels", - "Font size is controlled by the font-size CSS attribute.", - "We've already set the font-size attribute for all h2 elements. See if you can figure out how to give all p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for h1." + "Font size is controlled by the font-size CSS attribute, like this: h1 { font-size: 30px; }.", + "First, create a second p element with the following Kitty Ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "See if you can figure out how to give both of your p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your .red-text class." ], "tests": [ - "expect($('p')).to.have.css('font-size', '16px');" + "assert($('p').length > 1, 'You need 2 p elements with Kitty Ipsum text.')", + "assert($('p').css('font-size') === '16px', 'Your p elements should have be 16px font.')" ], "challengeSeed": [ "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + ], + "challengeType": 0 + }, + { + "_id": "bad87fee1348bd9aede08807", + "name": "Set the Font of an Element", + "difficulty": 0.0205, + "description": [ + "Make all p elements use the \"Monospace\" font.", + "You can set an element's font by using the font-family attribute.", + "For example, if you wanted to set your h2 element's font \"San-serif\", you would use the following CSS: h2 { font-family: 'San-serif'; }" + ], + "tests": [ + "assert($('p').css('font-family').match(/monospace/i, 'Your p elements should use the font \"Monospace\".')" + ], + "challengeSeed": [ + "", + "", + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, @@ -451,29 +486,31 @@ "name": "Import a Google Font", "difficulty": 0.021, "description": [ - "Apply the font-family of Lobster to all h1 elements.", - "The first line of code in your text editor is a call to Google that grabs a font called Lobster and loads it into your HTML.", - "You'll notice that we've already applied the font-family of Lobster to all h2 elements. Now you should also apply it to all h1 elements." + "Apply the font-family of Lobster to your h2 element.", + "First, you'll need to make a call to Google to grab the \"Lobster\" font and loads it into your HTML.", + "Copy and paste this into your code editor above your style element:", + "<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>", + "Now you can set \"Lobster\" as a font-family attribute." ], "tests": [ - "expect($('h1')).to.have.css('font-family', 'Lobster');" + "assert($('h2').css('font-family').match(/lobster/i', 'Your h2 element should use the font \"Lobster\".')" ], "challengeSeed": [ - "", "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, @@ -482,26 +519,37 @@ "name": "Specify How Fonts Should Degrade", "difficulty": 0.022, "description": [ - "Make all h2 elements use Lobster as their font family, but degrade to the Serif font when the Lobster font isn't available.", - "We commented out our call to Google Fonts, and now our lobter isn't available.", + "Make all h2 elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the Lobster font isn't available.", + "Commented out your call to Google Fonts, so that our \"Lobter\" isn't available.", "You can leave Lobster as the font, and have it degrade to a different font if that font isn't available.", - "There are several default fonts that are availble in all browsers. These include Monospace, Serif and Sans-Serif. See if you can set the h2 elements to use Lobster and degrade to monospace." + "For example, if you prefer \"Helvetica\", but want to degrade to \"Sans-Serif\" when Helvetica isn't available, you can do use this style: <p { font-family: \"Helvetica\", \"Sans-Serif\"; } >", + "There are several default fonts that are available in all browsers. These include \"Monospace\", \"Serif\" and \"Sans-Serif\". See if you can set the h2 elements to use \"Lobster\" and degrade to \"Monospace\"." ], "tests": [ - "expect($('h2')).to.have.css('font-family').match(/serif/i);", - "expect($('h2')).to.have.css('font-family').match(/lobster/i);" + "assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')", + "assert($('h2').css('font-family').match(/monospace/i), 'Your h2 element should degrade to the font \"Monospace\" when \"Lobster\" is not available.')" ], "challengeSeed": [ - "", + "", "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, diff --git a/views/bonfire/show.jade b/views/bonfire/show.jade index 9a28e530c2..1383241a9d 100644 --- a/views/bonfire/show.jade +++ b/views/bonfire/show.jade @@ -6,7 +6,7 @@ block content script(type='text/javascript', src='/js/lib/codemirror/addon/edit/matchbrackets.js') script(type='text/javascript', src='/js/lib/codemirror/addon/lint/lint.js') script(type='text/javascript', src='/js/lib/codemirror/addon/lint/javascript-lint.js') - script(type='text/javascript', src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js') + script(type='text/javascript', src='/bower_components/jshint/dist/jshint.js') script(type='text/javascript', src='/js/lib/chai/chai.js') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css') diff --git a/views/coursewares/showHTML.jade b/views/coursewares/showHTML.jade index 6349650804..2ca19662a0 100644 --- a/views/coursewares/showHTML.jade +++ b/views/coursewares/showHTML.jade @@ -5,7 +5,7 @@ block content script(src='/js/lib/codemirror/addon/edit/matchbrackets.js') script(src='/js/lib/codemirror/addon/lint/lint.js') script(src='/js/lib/codemirror/addon/lint/javascript-lint.js') - script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js') + script(src='/bower_components/jshint/dist/jshint.js') script(src='/js/lib/chai/chai.js') script(src='/js/lib/chai/chai-jquery.js') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') diff --git a/views/coursewares/showJS.jade b/views/coursewares/showJS.jade index b55d8ad4d9..7e87587f93 100644 --- a/views/coursewares/showJS.jade +++ b/views/coursewares/showJS.jade @@ -5,7 +5,7 @@ block content script(src='/js/lib/codemirror/addon/edit/matchbrackets.js') script(src='/js/lib/codemirror/addon/lint/lint.js') script(src='/js/lib/codemirror/addon/lint/javascript-lint.js') - script(src='//ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js') + script(src='/bower_components/jshint/dist/jshint.js') script(src='/js/lib/chai/chai.js') link(rel='stylesheet', href='/js/lib/codemirror/lib/codemirror.css') link(rel='stylesheet', href='/js/lib/codemirror/addon/lint/lint.css') From d2044eca06df9c0222e0a534fd829d057a30b9dc Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Tue, 12 May 2015 15:36:41 -0700 Subject: [PATCH 05/17] add some additional coursewares to front end curriculum --- seed_data/coursewares.json | 48 +++++++++++++++++++++----------------- 1 file changed, 26 insertions(+), 22 deletions(-) diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index 2a9a2e9288..614ae432d3 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -345,7 +345,7 @@ }, { "_id": "bad87fee1348bd9aedf08805", - "name": "Create a Style Tag for CSS", + "name": "Use CSS Selectors to Style Elements", "difficulty": 0.018, "description": [ "Create remove your h2 element's style tag and write the CSS to make all h2 elements blue.", @@ -353,7 +353,7 @@ "When you entered <h2 style=\"color: red\">Cat Photo App<h2>, you were giving that individual h2 element an inline style", "That's one way to add style to an element, but a better way is by using Cascading Style Sheets (CSS).", "At the top of your code, create a style tag like this: <style></style>", - "Inside that style element, you can create a global style for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2 {color: red;}</style>", + "Inside that style element, you can create a css selector for all h2 elements. For example, if you wanted all h2 elements to be red, your style element would look like this: <style>h2 {color: red;}</style>", "Note that it's important to have an opening and closing curly braces ({ and }) around each element's style. You also need to make sure your element's style is between the opening and closing style tags. Finally, be sure to add the semicolon to the end of each of the element's styles." ], "tests": [ @@ -408,8 +408,8 @@ "tests": [ "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", "assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')", - "assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')", - "assert($('p').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')" + "assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your p element should be red.')", + "assert($('p').hasClass('red-text'), 'You p element should have the class \"red-text\".')" ], "challengeSeed": [ "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, From 3ecf56d9fd30ed221a612896a4b45317500959e4 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Tue, 12 May 2015 17:09:13 -0700 Subject: [PATCH 06/17] finish courseware 29 --- seed_data/coursewares.json | 224 +++++++++++++++---------------------- 1 file changed, 91 insertions(+), 133 deletions(-) diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index 614ae432d3..d8e5f428e4 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -567,8 +567,8 @@ "Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations." ], "tests": [ - "assert($('h2').hasClass('blue-text'), 'You h2 element should have the class \"blue-text\".')", - "assert($('h2').hasClass('urgently-red'), 'You h2 element should have the class \"urgently-red\".')", + "assert($('h2').hasClass('blue-text'), 'Your h2 element should have the class \"blue-text\".')", + "assert($('h2').hasClass('urgently-red'), 'Your h2 element should have the class \"urgently-red\".')", "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')" ], "challengeSeed": [ @@ -595,143 +595,81 @@ ], "challengeType": 0 }, - { - "_id": "bad87fee1348bd9aedf08810", - "name": "Use Hex Codes for Precise Colors", - "difficulty": 0.024, - "description": [ - "Change the hex code in the \"red-text\" class to hex code for the color red.", - "Hexadecimal (hex) code is a popular way of specifying color in CSS.", - "Hex code is called \"hex\" because each digit has 16 possible values: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, and f", - "The six hex code correspond to red-red-green-green-blue-blue.", - "You can change these six values to make more than 16 million colors!", - "The higher the value in a field, the more intense its color. For example, #000000 is black, #ffffff is white, and #00ff00 is bright green. You can also get less intense colors by using values lower than f. For example, #00f000 with the second green digit set to 0 is a light green, and #00f900 is a slightly brighter green", - "Now figure out how to make the bright green in the \"red-text\" class into a bright red." - ], - "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - { - "_id": "bad87fee1348bd9bedf08810", - "name": "Use Shortened 3 Digit Hex Codes", - "difficulty": 0.025, - "description": [ - "Change the hex code in the \"red-text\" class to the shortened 3-digit hex code for the color red.", - "You can also shorten the 6-digit color hex code to a 3-digit code. For example, #00ff00 becomes #0f0. This is less precise, but equally effective." - ], - "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, - { - "_id": "bad87fee1348bd9aedf08811", - "name": "Use RGB Codes for Precise Colors", - "difficulty": 0.026, - "description": [ - "Change the RGB code to be red.", - "Another way to represent color in CSS is with RGB, or red-green-blue notation.", - "For each of the three colors, you specify a value between 0 and 256.", - "For example, black is rgb(0, 0, 0), white is rgb(255, 255, 255), bright green is rgb(0, 255, 0). You can also get less intense colors by using values lower than 255. For example, light green is rgb(0, 123, 0).", - "If you think about it, this is just as precise as using hex code, because 16 times 16 is 256. In practice, most developers use hex code since it's faster to say out loud and to type." - ], - "tests": [ - "expect($('h2')).to.have.css('color', 'rgb(255, 0, 0)');", - "expect($('h2')).to.have.class('red-text');" - ], - "challengeSeed": [ - "", - "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" - ], - "challengeType": 0 - }, + { "_id": "bad87fee1348bd9aedf08812", "name": "Add an Image to your Website", "difficulty": 0.027, "description": [ - "Use an img element to add the image http://bit.ly/cutegraycat to your website.", + "Use an img element to add the image http://bit.ly/fcc-kittens to your website.", "You can add images to your website by using the img element.", "An example of this would be <img src=\"www.your-image-source.com/your-image.jpg\"/>. Note that in most cases, img elements are self-closing.", "Try it with this image: http://bit.ly/cutegraycat." ], "tests": [ - "expect($('img').attr('src')).to.equal('http://bit.ly/cutegraycat');" + "assert($('img').length > 0, 'Your webpage should have an image element.')", + "assert(!!$('img').attr('src'), 'Your image should have have a src attribute that points to the kitten image.')" ], "challengeSeed": [ + "", "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

" + "

Cat Photo App

", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9acdf08812", - "name": "Specify an Image Size TEST", + "name": "Specify an Image Size", "difficulty": 0.028, "description": [ - "Create a class called narrow-image and use it to resize the image so that it's only 200 pixels wide", - "Uh-oh, our image is too big to fit on a mobile phone. As a result, our user will need to scroll horizontally to view the image. But we can fix this by specifying an image size.", + "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide.", "CSS has an attribute called width that controls an element's width. Just like with fonts, we'll use pixels(px) to specify the images width.", - "Create a class called narrow-image and added it to the image element. Change the width to 200 pixels." + "Create a class called smaller-image and added it to the image element. Change the width to 100 pixels." ], "tests": [ - "expect($('img')).to.have.class('narrow-image');", - "expect($('img')).to.have.css('width', 200px)" + "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", + "assert($('img').width() === 100, 'Your image should be 100 pixels wide.')" ], "challengeSeed": [ + "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" + "", + "

Cat Photo App

", + "", + "", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, @@ -740,35 +678,43 @@ "name": "Add a Border Around an Element", "difficulty": 0.029, "description": [ - "Create a class called \"thick-green-border\" that puts a 5-pixel-wide black border around your cat photo.", + "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border around your cat photo.", "CSS Borders have attributes like style, color and width.", "We've created an example border around your h1 element. See if you can add a 10-pixel-wide green border around your cat photo." ], "tests": [ - "expect($('img')).to.have.class('thick-green-border');", - "expect($('img')).to.have.css('border-color', 'rgb(0,255,0)'));", - "expect($('img')).to.have.css('border-width', '10px');" + "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", + "assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')", + "assert($('img').css('border-left-color') === 'rgb(0,128,0)', 'This test is broken. Sorry. Your image should have a green border.')", + "assert(parseInt($('img').css('border-left-width')) > 8, 'Your image should have a border with a width of 10 pixels.')" ], "challengeSeed": [ + "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" + "", + "

Cat Photo App

", + "", + "", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, @@ -782,30 +728,42 @@ "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 10 pixels." ], "tests": [ - "expect($('img')).to.have.class('thick-green-border');", - "expect($('img')).to.have.css('border-radius', '10px');" + "assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')", + "assert(parseInt($('img').css('border-top-left-radius')) > 8, 'Your image should have a border radius of 10 pixels')" ], "challengeSeed": [ + "", "", - "

hello world

", - "

cat photo app

", - "

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", - "" + "", + "

Cat Photo App

", + "", + "", + "", + "

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

", + "

Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.

" ], "challengeType": 0 }, From e8e538b1fa0823e430f132ed7926df7aa8999e20 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Tue, 12 May 2015 19:44:40 -0700 Subject: [PATCH 07/17] add additional coursewares --- seed_data/coursewares.json | 229 ++++++++++++++++++++++++++----------- 1 file changed, 164 insertions(+), 65 deletions(-) diff --git a/seed_data/coursewares.json b/seed_data/coursewares.json index d8e5f428e4..cb0394a2cb 100644 --- a/seed_data/coursewares.json +++ b/seed_data/coursewares.json @@ -181,15 +181,15 @@ }, { "_id": "bad87fee1348bd9aedf08801", - "name": "Use the P Element", + "name": "Use the Paragraph Element", "difficulty": 0.011, "description": [ - "Create a p element below the h2 element, and give it the text \"Hello Paragraph\".", - "p elements are the preferred element for normal-sized paragraph text on websites.", - "You can create a p element like so: <p>I'm a p tag!</p>" + "Create a paragraph element below the h2 element, and give it the text \"Hello Paragraph\".", + "Paragraph elements are the preferred element for normal-sized paragraph text on websites.", + "You can create a paragraph element like so: <p>I'm a p tag!</p>" ], "tests": [ - "assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your p element should have the text \"Hello Paragraph\"')" + "assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your paragraph element should have the text \"Hello Paragraph\"')" ], "challengeSeed": [ "

Hello World

", @@ -208,7 +208,7 @@ "You'll encounter other self-closing element tags soon." ], "tests": [ - "assert(($('br').length > 0), 'You should have a br element between your h2 and p elements.')" + "assert(($('br').length > 0), 'You should have a br element between your h2 and paragraph elements.')" ], "challengeSeed": [ "

Hello World

", @@ -230,7 +230,7 @@ "tests": [ "assert(($('h1').length > 0), 'The h1 element should not commented. It should be visible in the browser.')", "assert(($('h2').length > 0), 'The h2 element should not commented. It should be visible in the browser.')", - "assert(($('p').length > 0), 'The p element should not commented. It should be visible in the browser.')" + "assert(($('p').length > 0), 'The paragraph element should not commented. It should be visible in the browser.')" ], "challengeSeed": [ "