diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index d434232d16f..dbb0f037fef 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -732,7 +732,6 @@ "dashedName": "waypoint-add-images-to-your-website", "difficulty": 0.017, "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." @@ -788,9 +787,9 @@ "dashedName": "waypoint-size-your-images", "difficulty": 0.018, "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 image's 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>." + "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>.", + "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide." ], "tests": [ "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", @@ -844,9 +843,9 @@ "dashedName": "waypoint-add-borders-around-your-elements", "difficulty": 0.019, "description": [ - "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class 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>." + "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>.", + "Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo." ], "tests": [ "assert($('img').hasClass('smaller-image'), 'Your img element should have the class \"smaller-image\".')", @@ -907,9 +906,9 @@ "dashedName": "waypoint-add-rounded-corners-with-a-border-radius", "difficulty": 0.020, "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." + "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.", + "Give your cat photo a border-radius of 10 pixels." ], "tests": [ "assert($('img').hasClass('thick-green-border'), 'Your image element should have the class \"thick-green-border\".')", @@ -973,8 +972,8 @@ "dashedName": "waypoint-make-circular-images-with-a-border-radius", "difficulty": 0.021, "description": [ - "Give your cat photo a border-radius of 50%.", - "In addition to pixels, you can also specify a border-radius using a percentage." + "In addition to pixels, you can also specify a border-radius using a percentage.", + "Give your cat photo a border-radius of 50%." ], "tests": [ "assert(parseInt($('img').css('border-top-left-radius')) > 48, 'Your image should have a border radius of 50 percent, making it perfectly circular.')", @@ -1038,10 +1037,11 @@ "dashedName": "waypoint-link-to-external-pages-with-anchor-elements", "difficulty": 0.022, "description": [ - "Create an a element, or \"anchor element\", that links to http://catphotoapp.com and has \"cat photos\" as its link text, or \"anchor text\".", - "Here's a diagram of an a element. 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 elements or \"anchor\" elements, are used to link to content outside of the current page.", + "Here's a diagram of an a element. In this case, the a element is used in the middle of a paragraph element, which means the link will appear in the middle of a 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>." + "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>.", + "Create an a element that links to http://catphotoapp.com and has \"cat photos\" as its \"anchor text\"." ], "tests": [ "assert((/cat photos/gi).test($('a').text()), 'Your a element should have the anchor text of \"cat photos\"')", @@ -1108,10 +1108,10 @@ "dashedName": "waypoint-wrap-an-anchor-element-within-a-paragraph", "difficulty": 0.023, "description": [ - "Now wrap your a element within a new p 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 a element 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>." + "Here's an example: <p>Here's a <a href='http://freecodecamp.com'> link to Free Code Camp</a> for you to follow.</p>.", + "Now wrap your a element within a new p 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." ], "tests": [ "assert($('a').attr('href').match(/catphotoapp.com/gi).length > 0, 'You need an a element that links to \"catphotoapp.com\".')", @@ -1183,10 +1183,9 @@ "dashedName": "waypoint-make-dead-links-using-the-hash-symbol", "difficulty": 0.024, "description": [ - "Use the hash symbol (#) to turn your a element's link into a dead link.", "Sometimes you want to add a 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 a element's href attribute with a hash symbol to turn it into a dead link." + "Replace your a 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 \"#\".')" @@ -1253,7 +1252,6 @@ "dashedName": "waypoint-turn-an-image-into-a-link", "difficulty": 0.025, "description": [ - "Wrap your img element inside an a element with a dead link.", "You can make elements into links by wrapping them within an a element.", "Wrap your image within an a element. Here's an example: <a href='#'><img src='http://bit.ly/fcc-kittens2'/></a>.", "Remember to use the hash symbol (#) as your a element's href property in order to turn it into a dead link.", @@ -1327,11 +1325,11 @@ "dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility", "difficulty": 0.026, "description": [ - "Add an alt attribute with the text \"A cute orange cat lying on its back\" to our cat photo.", "alt attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. alt attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at alt attributes.", "In short, every image should have an alt attribute!", "alt attributes are 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 an alt attribute right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>." + "You can add an alt attribute right in the img element like this: <img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/>.", + "Add an alt attribute with the text \"A cute orange cat lying on its back\" to our cat photo." ], "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\".')" @@ -1399,10 +1397,10 @@ "dashedName": "waypoint-create-a-bulleted-unordered-list", "difficulty": 0.027, "description": [ - "Replace your p 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\"." + "For example: <ul><li>milk</li><li>cheese</li></ul> would create a bulleted list of \"milk\" and \"cheese\".", + "Replace your p elements with an unordered list of three things that cats love." ], "tests": [ "assert($('ul').length > 0, 'Create a ul element.')", @@ -1472,10 +1470,10 @@ "dashedName": "waypoint-create-an-ordered-list", "difficulty": 0.028, "description": [ - "Create an ordered list of 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\"." + "For example: <ol><li>hydrogen</li><li>helium</li></ol> would create a numbered list of \"hydrogen\" and \"helium\".", + "Create an ordered list of the top 3 things cats hate the most." ], "tests": [ "assert($('ul').length > 0, 'You should have an ul element on your page.')", @@ -1552,9 +1550,10 @@ "dashedName": "waypoint-create-a-text-field", "difficulty": 0.029, "description": [ - "Now we'll create a web form. Create a text input under your lists.", + "Now let's create a web form.", "Text inputs are a convenient way to get input from your user.", - "You can create one like this: <input type='text'>. Note that input elements are self-closing." + "You can create one like this: <input type=\"text\">. Note that input elements are self-closing.", + "Create an input element of type \"text\" below your lists." ], "tests": [ "assert($('input').length > 0, 'Your app should have a text field input element.')" @@ -1630,9 +1629,9 @@ "dashedName": "waypoint-add-placeholder-text-to-a-text-field", "difficulty": 0.030, "description": [ - "Set the placeholder value of your text input to \"cat photo URL\".", "Your placeholder text is what appears in your text input before your user has inputed anything.", - "You can create placeholder text like so: <input type='text' placeholder='this is placeholder text'>." + "You can create placeholder text like so: <input type='text' placeholder='this is placeholder text'>.", + "Set the placeholder value of your text input to \"cat photo URL\"." ], "tests": [ "assert($('input[placeholder]').length > 0, 'Add a placeholder attribute text input element.')", @@ -1710,9 +1709,9 @@ "dashedName": "waypoint-create-a-form-element", "difficulty": 0.031, "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>." + "For example: <form action=\"/url-where-you-want-to-submit-form-data\"></form>.", + "Wrap your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element." ], "tests": [ "assert($('form') && $('form').children('input') && $('form').children('input').length > 0, 'Wrap your text input element within a form element.')", @@ -1792,9 +1791,9 @@ "dashedName": "waypoint-add-a-submit-button-to-a-form", "difficulty": 0.032, "description": [ - "Add a submit button to your form element with type \"submit\" and \"Submit\" as its text.", "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>." + "Here's an example submit button: <button type='submit'>this button submits the form</button>.", + "Add a submit button to your form element with type \"submit\" and \"Submit\" as its text." ], "tests": [ "assert($('form').children('button').length > 0, 'Your form should have a button inside it.')", @@ -1876,9 +1875,9 @@ "dashedName": "waypoint-use-html5-to-require-a-field", "difficulty": 0.033, "description": [ - "Make your text input a \"required\" field, so that your user can't submit the form without completing this field.", "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.", - "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your input element, you would use: <input type='text' required>." + "For example, if you wanted to make a text input field required, you can just add the word \"required\" within your input element, you would use: <input type='text' required>.", + "Make your text input a \"required\" field, so that your user can't submit the form without completing this field." ], "tests": [ "assert($('input').prop('required'), 'Your text input element should have the \"required\" attribute.')" @@ -1958,12 +1957,12 @@ "dashedName": "waypoint-create-a-set-of-radio-buttons", "difficulty": 0.034, "description": [ - "Add to your form a pair of radio buttons. Each radio button should be wrapped within its own label element. They should share a common name attribute. One should have the option of \"indoor\" and the other should have the option of \"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.", "Each of your radio buttons should be wrapped within its own 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>." + "Here's an example of a radio button: <label><input type='radio' name='indoor-outdoor'> Indoor</label>.", + "Add to your form a pair of radio buttons. Each radio button should be wrapped within its own label element. They should share a common name attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"." ], "tests": [ "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')", @@ -2051,9 +2050,9 @@ "dashedName": "waypoint-create-a-set-of-checkboxes", "difficulty": 0.035, "description": [ - "Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own label element. All three should share the name attribute of \"personality\".", "Forms commonly use checkbox inputs for questions that may have more than one answer.", - "For example: <label><input type='checkbox' name='personality'> Loving</label>." + "For example: <label><input type='checkbox' name='personality'> Loving</label>.", + "Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own label element. All three should share the name attribute of \"personality\"." ], "tests": [ "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')", @@ -2138,9 +2137,9 @@ "dashedName": "waypoint-check-radio-buttons-and-checkboxes-by-default", "difficulty": 0.037, "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>." + "You can 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>.", + "Set the first of your radio buttons and the first of your checkboxes to both be checked by default." ], "tests": [ "assert($('input[type=\"radio\"]').prop('checked'), 'Your first radio button on your form should be checked by default.');", @@ -2226,11 +2225,11 @@ "dashedName": "waypoint-wrap-many-elements-within-a-single-div-element", "difficulty": 0.038, "description": [ - "Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single div element.", "The div element, or \"Division\" element, is a general purpose container for other elements.", "The div element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.", "Just like any other non-self-closing element, you can open a div element with <div> and close it on another line with </div>.", - "Try putting your opening div tag above your \"Things cats love\" p element and your closing div tag after your closing ol tag so that both of your lists are within one div." + "Try putting your opening div tag above your \"Things cats love\" p element and your closing div tag after your closing ol tag so that both of your lists are within one div.", + "Wrap your \"Things cats love\" and \"Things cats hate\" lists all within a single div element." ], "tests": [ "assert($('div').children('ol').length > 0, 'Wrap your ol element inside your div element.')",