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.",
"",
- "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:",
"",
- "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.')",