{ "name": "Basic HTML5 and CSS", "order" : 0.002, "challenges": [ { "_id": "bd7123c8c441eddfaeb5bdef", "name": "Waypoint: Say Hello to HTML Elements", "difficulty": 0.0085, "description": [ "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 your text editor, which we've embedded into this web page.", "Do you see the code in your 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 each challenge, and all its tests are passing, 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 your h1 tag's text to say \"Hello World\" instead of \"Hello\"." ], "tests": [ "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')" ], "challengeSeed": [ "

Hello

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf0887a", "name": "Waypoint: Headline with the h2 Element", "difficulty": 0.010, "description": [ "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"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": [ "assert(($('h2').length > 0), 'Create an h2 elements.')", "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your h2 element should have the text \"CatPhotoApp\"')", "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')" ], "challengeSeed": [ "

Hello World

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08801", "name": "Waypoint: Inform with the Paragraph Element", "difficulty": 0.011, "description": [ "Create a paragraph element below your h2 element, and give it the text \"Hello Paragraph\". As soon as you create the opening <p> tag, one of our tests will pass (since this is valid HTML). Be sure to close the element by adding a closing </p> tag.", "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(($('p').length > 0), 'Create a paragraph element.')", "assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your paragraph element should have the text \"Hello Paragraph\"')" ], "challengeSeed": [ "

Hello World

", "

CatPhotoApp

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aeaf08801", "name": "Waypoint: Visually Separate Elements with Line Breaks", "difficulty": 0.012, "description": [ "Add a line break between the <h2> and <p> elements.", "You can create a 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." ], "tests": [ "assert(($('br').length > 0), 'You should have a br element between your h2 and paragraph elements.')" ], "challengeSeed": [ "

Hello World

", "

CatPhotoApp

", "

Hello Paragraph

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08802", "name": "Waypoint: Uncomment HTML", "difficulty": 0.013, "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": [ "assert(($('h1').length > 0), 'The h1 element should not be commented. It should be visible in the browser.')", "assert(($('h2').length > 0), 'The h2 element should not be commented. It should be visible in the browser.')", "assert(($('p').length > 0), 'The paragraph element should not be commented. It should be visible in the browser.')" ], "challengeSeed": [ "" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08804", "name": "Waypoint: Comment out HTML", "difficulty": 0.014, "description": [ "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." ], "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 paragraph element should be commented. It should not be visible in the browser.')" ], "challengeSeed": [ "" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08833", "name": "Waypoint: Fill in the Blank with Placeholder Text", "difficulty": 0.015, "description": [ "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 CatPhotoApp, 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((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your paragraph element should contain the first few words of the famous Kitty Ipsum text.')" ], "challengeSeed": [ "

Hello World

", "", "

CatPhotoApp

", "", "
", "", "

Hello Paragraph

" ], "challengeType": 0 }, { "_id": "bad87fed1348bd9aedf08833", "name": "Waypoint: Delete HTML Elements", "difficulty": 0.016, "description": [ "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 CatPhotoApp." ], "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 paragraph element on the page.')" ], "challengeSeed": [ "

Hello World

", "", "

CatPhotoApp

", "", "
", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08803", "name": "Waypoint: Change the Color of Text", "difficulty": 0.017, "description": [ "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 that is responsible for the color of an element's text is the \"color\" style.", "Here's how you would set your h2 element's text color to blue: <h2 style=\"color: blue\">CatPhotoApp<\/h2>" ], "tests": [ "assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')" ], "challengeSeed": [ "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08805", "name": "Waypoint: Use CSS Selectors to Style Elements", "difficulty": 0.018, "description": [ "Delete 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\">CatPhotoApp<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 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 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 your element's styles." ], "tests": [ "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": [ "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aecf08806", "name": "Waypoint: Use a CSS Class to Style an Element", "difficulty": 0.019, "description": [ "Create a CSS class called \"red-text\" and apply it to your h2 element.", "Classes are reusable styles that can be added to HTML elements.", "Here's the anatomy of a CSS class:", "a diagram of how style tags are composed, which is also described in detail on the following lines.", "You can see that we've created a CSS class called \"blue-text\" within the <style> tag.", "You can apply a class to an HTML element like this: <h2 class=\"blue-text\">CatPhotoApp<h2>", "Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.", "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": [ "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": [ "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aefe08806", "name": "Waypoint: Style Multiple Elements with a CSS Class", "difficulty": 0.020, "description": [ "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": [ "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 paragraph element should be red.')", "assert($('p').hasClass('red-text'), 'You paragraph element should have the class \"red-text\".')" ], "challengeSeed": [ "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08806", "name": "Waypoint: Change the Font Size of an Element", "difficulty": 0.021, "description": [ "Create a second p element. Then, inside your <style> element, set the font size of all p elements to 16 pixels.", "Font size is controlled by the font-size CSS attribute, like this: h1 { font-size: 30px; }.", "First, create a second paragraph 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 paragraph 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": [ "assert($('p').length > 1, 'You need 2 paragraph elements with Kitty Ipsum text.')", "assert($('p').css('font-size') === '16px', 'Your paragraph elements should have the font-size of 16px.')" ], "challengeSeed": [ "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aede08807", "name": "Waypoint: Set the Font Family of an Element", "difficulty": 0.022, "description": [ "Make all paragraph 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 to \"San-serif\", you would use the following CSS: h2 { font-family: 'San-serif'; }" ], "tests": [ "assert($('p').css('font-family').match(/monospace/i), 'Your paragraph elements should use the font \"Monospace\".')" ], "challengeSeed": [ "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08807", "name": "Waypoint: Import a Google Font", "difficulty": 0.023, "description": [ "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 load it into your HTML.", "Copy the following code snippet and paste it 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 on your h2 element." ], "tests": [ "assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')" ], "challengeSeed": [ "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08808", "name": "Waypoint: Specify How Fonts Should Degrade", "difficulty": 0.024, "description": [ "Make all your h2 elements use \"Lobster\" as their font family, but degrade to the \"Monospace\" font when the \"Lobster\" font isn't available.", "You can leave \"Lobster\" your h2 element's font-family, and have it \"degrade\" to a different font when \"Lobster\" isn't available.", "For example, if you wanted an element to use the \"Helvetica\" font, but also degrade to the \"Sans-Serif\" font when \"Helvetica\" wasn't available, you could do use this CSS 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 your h2 elements to use \"Lobster\" and degrade to \"Monospace\".", "Now try commenting out your call to Google Fonts, so that the \"Lobster\" font isn't available. Notice how it degrades to the \"Monospace\" font." ], "tests": [ "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": [ "", "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08809", "name": "Waypoint: Override Styles with Important", "difficulty": 0.025, "description": [ "Create a \"blue-text\" class that gives an element the font-color of blue. Also create a \"urgently-red\" class that give an element the font-color of red, but use !important to ensure the element is rendered as being red. Apply both classes to your h2 element.", "You can add more than one class to an element by seperating the class declarations with a space, like this: <h2 class='green-text giant-text'>This will be giant green text</h2>.", "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.", "In case you're curious, this is the priority hierarchy for element styles: !important > inline style > css class selector > css selector. That is, !important trumps all other styles, and inline styles trump style tag declarations.", "Here's an example of a CSS style that uses !important: <style> .urgently-blue { color: blue !important; } </style>.", "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'), '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": [ "", "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08812", "name": "Waypoint: Add Images to your Website", "difficulty": 0.026, "description": [ "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, and point to an specific image's URL using the src attribute.", "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/fcc-kittens." ], "tests": [ "assert($('img').length > 0, 'Your webpage should have an image element.')", "assert(!!$('img').filter(function(index) { return /kittens/gi.test($('img').attr('src')); }).length > 0, 'Your image should have have a src attribute that points to the kitten image.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "Waypoint: Size your Images", "difficulty": 0.027, "description": [ "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.", "For example, if we wanted to create a CSS class called \"larger-image\" that gave HTML elements a width of 500 pixels, we'd use: <style> .larger-image { width: 500px; } </style>." ], "tests": [ "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": [ "", "", "", "

CatPhotoApp

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9bedf08813", "name": "Waypoint: Add Borders Around your Elements", "difficulty": 0.028, "description": [ "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border around an HTML element, and apply it to your cat photo.", "CSS borders have attributes like style, color and width.", "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style>." ], "tests": [ "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(parseInt($('img').css('border-left-width')) > 8, 'Your image should have a border with a width of 10 pixels.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08814", "name": "Waypoint: Add Rounded Corners with a Border Radius", "difficulty": 0.029, "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": [ "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": [ "", "", "", "

CatPhotoApp

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08815", "name": "Waypoint: Make Circular Images with a Border Radius", "difficulty": 0.030, "description": [ "Give your cat photo a border-radius of 50%.", "In addition to pixels, you can also specify a border-radius using a percentage." ], "tests": [ "assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08816", "name": "Waypoint: Link to External Pages with Anchor Elements", "difficulty": 0.031, "description": [ "Create an anchor element that links to http://catphotoapp.com and has \"cat photos\" as its anchor text (link text).", "Here's a diagram of an anchor tag. In this case, it's used in the middle of a paragraph element, which means your link will appear in the middle of your sentence.", "a diagram of how anchor tags are composed with the same text as on the following line", "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>" ], "tests": [ "assert((/cat photos/gi).test($('a').text()), 'Your anchor element should have the anchor text of \"See my cat photos\"')", "assert($('a').filter(function(index) { return /com/gi.test($('a').attr('href')); }).length > 0, 'You need an anchor element that links to http://catphotoapp.com.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aede08817", "name": "Waypoint: Wrap an Anchor Element within a Paragraph", "difficulty": 0.032, "description": [ "Now wrap your anchor element within a paragraph element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link - the rest is plain text.", "Again, here's a diagram of an anchor tag for your reference:", "a diagram of how anchor tags are composed with the same text as on the following line", "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>" ], "tests": [ "assert((/photo/gi).test($('a').text()), 'You need an anchor element that links to \"catphotoapp.com\".')", "assert($('a').filter(function(index) { return /photo/gi.test($('a')[index]); }).length === 1, 'Your anchor element should have the anchor text of \"See my cat photos\"')", "assert($('a').parent().is('p'), 'Your anchor element should be wrapped within a paragraph element.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "cat photos", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08817", "name": "Waypoint: Make Dead Links using the Hash Symbol", "difficulty": 0.033, "description": [ "Use the hash symbol(#) to turn your anchor element's link into a dead link.", "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 your anchor element's href attribute with a hash symbol to turn it into a dead link." ], "tests": [ "assert($('a').attr('href') === '#', 'Your anchor element should be a dead link with a href attribute set to \"#\".')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08820", "name": "Waypoint: Turn an Image into a Link", "difficulty": 0.034, "description": [ "Wrap your img element inside an anchor element with a dead link.", "You can make elements into links by wrapping them in an anchor tag.", "Wrap your image in an anchor tag. Here's an example: <a href='#'><img src='http://bit.ly/fcc-kittens2'></a>", "Remember to use the hash symbol as your anchor tag's href property in order to turn it into a dead link.", "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link." ], "tests": [ "assert($('a').filter(function(index) { return /#/gi.test($('a')[index]); }).length > 1, 'Wrap your image element inside an anchor element that has its href attribute set to \"#\".')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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": "bad87fee1348bd9aedf08818", "name": "Waypoint: Add Alt Text to an Image for Accessibility", "difficulty": 0.035, "description": [ "Add the alt text \"A cute orange cat lying on its back\" 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!", "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": [ "assert($('img').filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt attribute set to \"A cute orange cat lying on its back\".')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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" : "bad87fee1348bd9aedf08827", "name": "Waypoint: Create a Bulleted Unordered List", "difficulty" : 0.036, "description": [ "Replace the paragraph elements with an unordered list of three things that cats love.", "HTML has a special element for creating unordered lists, or bullet point-style lists.", "Unordered lists start with a <ul> element. Then they contain some number of <li> elements.", "For example: <ul><li>milk</li><li>cheese</li><ul> would create a bulleted list of \"milk\" and \"cheese\"." ], "tests": [ "assert($('ul').length > 0, 'Create a ul element.')", "assert($('li').length > 2, 'Add three li elements to your ul element.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.

", "

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" : "bad87fee1348bd9aedf08828", "name": "Waypoint: Create an Ordered List", "difficulty" : 0.037, "description": [ "Create an ordered list of the the top 3 things cats hate the most.", "HTML has a special element for creating ordered lists, or numbered-style lists.", "Ordered lists start with a <ol> element. Then they contain some number of <li> elements.", "For example: <ol><li>hydrogen</li><li>helium</li><ol> would create a numbered list of \"hydrogen\" and \"helium\"." ], "tests": [ "assert($('ul').length > 0, 'You should have an ul element on your webpage.')", "assert($('ol').length > 0, 'You should have an ol element on your webpage.')", "assert($('li').length > 5, 'You should have three li elements on within your ul element.')", "assert($('li').length > 5, 'You should have three li elements on within your ol element.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "" ], "challengeType": 0 }, { "_id" : "bad87fee1348bd9aedf08829", "name": "Waypoint: Create a Text Field", "difficulty" : 0.038, "description": [ "Now we'll create a web form. Create a text field under your lists.", "Text inputs are a convenient way to get input from your user.", "You can create one like this: <input type='text'>" ], "tests": [ "assert($('input').length > 0, 'Your app should have an text field input element.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
" ], "challengeType": 0 }, { "_id" : "bad87fee1348bd9aedf08830", "name": "Waypoint: Add Placeholder Text to a Text Field", "difficulty" : 0.039, "description": [ "Add the placeholder text \"type a cat photo URL here\" to your text field.", "Placeholder text will appear in your text field before your user has inputed anything.", "For example: <input type='text' placeholder='this is placeholder text'>" ], "tests": [ "assert($('[placeholder]').length > 0, 'Your text field should have a placeholder attribute.')", "assert(/url/gi.test($('input').attr('placeholder')), 'Your placeholder field should have the value of \"cat photo URL\".')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "" ], "challengeType": 0 }, { "_id" : "bad87fee1348bd9aede08830", "name": "Waypoint: Create a Form Element", "difficulty" : 0.040, "description": [ "Wrap your text field in a <form> element. Add the action=\"/submit-cat-photo\" attribute to this form element.", "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.", "For example: <form action=\"/url-where-you-want-to-submit-form-data\"></form>" ], "tests": [ "assert($('form').length > 0, 'Wrap your text input element within a form element.')", "assert($('form').attr('action'), 'Your form element should have an action attribute.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "" ], "challengeType": 0 }, { "_id" : "bad87fee1348bd9aedd08830", "name": "Waypoint: Add a Submit Button to a Form", "difficulty" : 0.041, "description": [ "Add a submit button to your form field.", "Let's add a submit button to your form. Clicking this button will send the data from your form to the URL you specified with your form's action attribute.", "Here's an example submit button: <button type='submit'>this button submits the form</button>" ], "tests": [ "assert($('button').length > 0, 'Your form should have a button inside it.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", "
  • lasagna
    • ", "
", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "
", " ", "
" ], "challengeType": 0 }, { "_id" : "bad87fee1348bd9aedc08830", "name": "Waypoint: Use HTML5 to Require a Field", "difficulty" : 0.042, "description": [ "Make it required for your user to input text into your form before being able to submit it.", "You can require your user to complete specific form fields before they will be able to submit your form.", "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your input element use: <input type='text' required>" ], "tests": [ "assert($('input').prop('required'), 'Your text field have the property of being required.')", "assert($('[placeholder]').length > 0, 'Your text field should have the placeholder text of \"cat photo URL\".')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", "
  • lasagna
    • ", "
", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "
", " ", " ", "
" ], "challengeType": 0 }, { "_id" : "bad87fee1348bd9aedf08834", "name": "Waypoint: Create a Set of Radio Buttons", "difficulty" : 0.043, "description": [ "Add to your form a pair of radio buttons that are wrapped in label elements and share a name attribute, with the options of \"indoor\" and \"outdoor\".", "You can use radio buttons for questions where you want the user to only give you one answer.", "Radio buttons are a type of input.", "Radio buttons should be wrapped within label elements.", "All related radio buttons should have the same name attribute.", "Here's an example of a radio button: <label><input type='radio' name='indoor-outdoor'> Indoor</label>" ], "tests": [ "assert($('input[type=\"radio\"]').length > 1, 'Your webpage should have two radio button elements.')", "assert($('input[type=\"radio\"]:nth-child(1)').attr('name') === 'indoor-outdoor', 'Give your radio buttons the name attribute of \"indoor-outdoor\".')", "assert($('label').length > 1, 'Each of your two radio button elements should be wrapped in a label element.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", "
  • lasagna
    • ", "
", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "
", " ", " ", "
" ], "challengeType": 0 }, { "_id" : "bad87fee1348bd9aedf08835", "name": "Waypoint: Create a Set of Checkboxes", "difficulty" : 0.044, "description": [ "Add to your form a set of three checkbox elements that are wrapped in label elements and share the same name attribute.", "Forms commonly use checkbox elements for questions that may have more than one answer.", "For example: <label><input type='checkbox' name='personality'> Loving</label>" ], "tests": [ "assert($('input[type=\"checkbox\"]').length > 2, 'Your webpage should have three checkbox elements.')", "assert($('label').length > 4, 'Each of your three checkbox elements should be wrapped in a label element.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", "
  • lasagna
    • ", "
", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "
", " ", " ", " ", " ", "
" ], "challengeType" : 0 }, { "_id" : "bad87fee1348bd9aede08835", "name": "Waypoint: Clean up your form using Linebreaks", "difficulty" : 0.045, "description": [ "Clean up your form by adding linebreaks between form elements.", "Remember that you can create a linebreak element by using the code: <br>" ], "tests": [ "assert($('br').length > 1, 'Add at least 2 line breaks to visually separate your form elements.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", "
  • lasagna
    • ", "
", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "
", " ", " ", " ", " ", " ", " ", " ", "
" ], "challengeType" : 0 }, { "_id" : "bad87fee1348bd9aedd08835", "name": "Waypoint: Check Radio Buttons and Checkboxes by Default", "difficulty" : 0.046, "description": [ "Set the first of your radio buttons and the first of your checkboxes to both be checked by default.", "You set a checkbox or radio button to be checked by default using the checked attribute.", "To do this, just add the word \"checked\" to the inside of an input element. For example, <input type='radio' name='test-name' checked>." ], "tests": [ "assert($('input[type=\"radio\"').prop('checked'), 'Your first radio button on your form should be checked by default.')", "assert($('input[type=\"checkbox\"').prop('checked'), 'Your first checkbox on your form should be checked by default.')" ], "challengeSeed": [ "", "", "", "

CatPhotoApp

", "", "

Click here for cat photos.

", "", "", "", "

Things cats love:

", "
    ", "
  • cat nip
    • ", "
  • laser pointers
    • ", "
  • lasagna
    • ", "
", "

Top 3 things cats hate:

", "
    ", "
  1. flea treatment
    2. ", "
  2. thunder
    3. ", "
  3. other cats
    4. ", "
", "
", " ", " ", "
", " ", " ", " ", "
", " ", " ", "
" ], "challengeType" : 0 }, { "_id": "bad88fee1348bd9aedf08825", "name": "Waypoint: Adjusting the Padding of an Element", "difficulty": 0.064, "description": [ "These next few Waypoints will give you a brief tour of three important aspects of the space surrounding HTML elements: padding, margin, and border. Change the padding of your green box to match that of your red box.", "An element's padding controls the amount of space between the element and its border.", "Here, we can see that the green box and the red 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 text \"padding\" and the border around it." ], "tests": [ "assert($('.green-box').css('padding-top') === '20px', 'Your green-box class should give elements 20px of padding.')" ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", "
padding
", "
" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08822", "name": "Waypoint: Adjust the Margin of an Element", "difficulty": 0.065, "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 margin, it will increase the distance between its border and surrounding elements." ], "tests": [ "assert($('.green-box').css('margin-top') === '20px', 'Your green-box class should give elements 20px of margin.')" ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", "
padding
", "
" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08823", "name": "Waypoint: Add a Negative Margin to an Element", "difficulty": 0.066, "description": [ "Change the margin of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.", "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": [ "assert($('.green-box').css('margin-top') === '-15px', 'Your green-box class should give elements -15px of margin.')" ], "challengeSeed": [ "", "", "
", "
padding
", "
padding
", "
" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08824", "name": "Waypoint: Add Different Padding to Each Side of an Element", "difficulty": 0.067, "description": [ "Give the green box a padding of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", "Sometimes you will want to customize an element so that it has different padding on each of its sides.", "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes." ], "tests": [ "assert($('.green-box').css('padding-left') === '40px', 'Your green-box class should give the left of elements 40px of padding.')", "assert($('.green-box').css('padding-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of padding.')" ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", "
padding
", "
" ], "challengeType": 0 }, { "_id": "bad87fee1248bd9aedf08824", "name": "Waypoint: Add Different a Margin to Each Side of an Element", "difficulty": 0.068, "description": [ "Give the green box a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.", "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes." ], "tests": [ "assert($('.green-box').css('margin-left') === '40px', 'Your green-box class should give the left of elements 40px of margin.')", "assert($('.green-box').css('margin-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of margin.')" ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", "
padding
", "
" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08826", "name": "Waypoint: Use Clockwise Notation to Specify the Padding of an Element", "difficulty": 0.069, "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": [ "assert($('.green-box').css('padding-left') === '40px', 'Your green-box class should give the left of elements 40px of padding.')", "assert($('.green-box').css('padding-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of padding.')" ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", "
padding
", "
" ], "challengeType": 0 }, { "_id": "bad87fee1348bd9aedf08726", "name": "Waypoint: Use Clockwise Notation to Specify the Margin of an Element", "difficulty": 0.070, "description": [ "Let's try this again, but with margin this time. Use Clockwise Notation to give an element a margin 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 margin-top, margin-right, margin-bottom, and margin-left attributes, you can specify them all in one line, like this: margin: 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": [ "assert($('.green-box').css('margin-left') === '40px', 'Your green-box class should give the left of elements 40px of margin.')", "assert($('.green-box').css('margin-bottom') === '20px', 'Your green-box class should give the bottom of elements 20px of margin.')" ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", "
padding
", "
" ], "challengeType": 0 } ] }