diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json index 21e98f741a..fe3345e6ac 100644 --- a/challenges/01-responsive-web-design/basic-css.json +++ b/challenges/01-responsive-web-design/basic-css.json @@ -1049,7 +1049,7 @@ "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. This class should add a 10px, solid, green border around a HTML element. Apply the class to your cat photo.", + "Create a class called thick-green-border. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.", "Remember that you can apply multiple classes to an element using its class attribute, by separating each class name with a space. For example:", "<img class=\"class1 class2\">" ], @@ -1178,7 +1178,7 @@ "description": [ "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", "
", - "One of the units you can use to specify the radius of a border is with pixels. Give your cat photo a border-radius of 10px.", + "You can specify a border-radius with pixels. Give your cat photo a border-radius of 10px.", "Note: this challenge allows for multiple possible solutions. For example, you may add border-radius to either the .thick-green-border class or the .smaller-image class." ], "challengeSeed": [ @@ -1292,9 +1292,7 @@ "description": [ "In addition to pixels, you can also specify the border-radius using a percentage.", "
", - "Give your cat photo a border-radius of 50%.", - "
", - "As you can tell from the end result, this is an easy way to create circular images." + "Give your cat photo a border-radius of 50%." ], "challengeSeed": [ "", diff --git a/challenges/01-responsive-web-design/basic-html-and-html5.json b/challenges/01-responsive-web-design/basic-html-and-html5.json index ce0f20b3cd..c0b3447d61 100644 --- a/challenges/01-responsive-web-design/basic-html-and-html5.json +++ b/challenges/01-responsive-web-design/basic-html-and-html5.json @@ -708,7 +708,7 @@ "id": "bad87fee1348bd9aedf08816", "title": "Link to External Pages with Anchor Elements", "description": [ - "a elements, also known as anchor elements, are used to link to content inside, as well as outside of the current page. For this lesson, we are going to focus on using the a element for external links.", + "a elements, also known as anchor elements, are used to link to content outside of the current page.", "\"aClick to enlarge ", "The above diagram of an a element demonstrated that you can use an anchor element almost anywhere, even inside another element. In this case, the link will appear in the middle of the paragraph.", "Here's an example:", @@ -1174,11 +1174,11 @@ "id": "bad87fee1348bd9aedf08827", "title": "Create a Bulleted Unordered List", "description": [ - "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.", + "HTML has a special element for creating unordered lists, or bullet point style lists.", + "Unordered lists start with an opening <ul> element, followed by any number of <li> elements. Finally, unordered lists close with a </ul>", "For example: ", "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", - "would create a bullet point-style list of \"milk\" and \"cheese\".", + "would create a bullet point style list of \"milk\" and \"cheese\".", "
", "Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page." ], @@ -1256,8 +1256,8 @@ "id": "bad87fee1348bd9aedf08828", "title": "Create an Ordered List", "description": [ - "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.", + "HTML has another special element for creating ordered lists, or numbered lists.", + "Ordered lists start with an opening <ol> element, followed by any number of <li> elements. Finally, ordered lists close with a </ol>", "For example:", "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", "would create a numbered list of \"Garfield\" and \"Sylvester\".", @@ -1350,9 +1350,9 @@ "title": "Create a Text Field", "description": [ "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\">", + "Input elements are a convenient way to get input from your user.", + "You can create a text input like this:", + "<input type=\"text\" />", "Note that input elements are self-closing.", "
", "Create an input element of type text below your lists." @@ -1440,7 +1440,7 @@ "id": "bad87fee1348bd9aedf08830", "title": "Add Placeholder Text to a Text Field", "description": [ - "Your placeholder text is what appears in your text input before your user has input anything.", + "Placeholder text is what is displayed in your input element before your user has inputted anything.", "You can create placeholder text like so:", "<input type=\"text\" placeholder=\"this is placeholder text\">", "
", @@ -1527,7 +1527,7 @@ "For example:", "<form action=\"/url-where-you-want-to-submit-form-data\"></form>", "
", - "Nest your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element." + "Nest your text field inside a form element, and add the action=\"/submit-cat-photo\" attribute to the form element." ], "challengeSeed": [ "

CatPhotoApp

", @@ -1609,7 +1609,7 @@ "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." + "Add a button as the last element of your form element with a type of submit, and \"Submit\" as its text." ], "challengeSeed": [ "

CatPhotoApp

", @@ -1692,7 +1692,7 @@ "title": "Use HTML5 to Require a Field", "description": [ "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, like this: <input type=\"text\" required>", + "For example, if you wanted to make a text input field required, you can just add the attribute required within your input element, like this: <input type=\"text\" required>", "
", "Make your text input a required field, so that your user can't submit the form without completing this field.", "Then try to submit the form without inputting any text. See how your HTML5 form notifies you that the field is required?" @@ -1778,13 +1778,14 @@ "id": "bad87fee1348bd9aedf08834", "title": "Create a Set of Radio Buttons", "description": [ - "You can use radio buttons for questions where you want the user to only give you one answer out of multiple options.", - "Radio buttons are a type of input", + "You can use radio buttons for questions where you want the restrcit the user to only one answer out of multiple options.", + "Radio buttons are a type of input field", "Each of your radio buttons should be nested within its own label element.", "All related radio buttons should have the same name attribute.", "Here's an example of a radio button:", - "
<label for=\"indoor\">
<input type=\"radio\" name=\"indoor-outdoor\">Indoor
</label>
", - "It is considered best practice to set the for attribute for assistive technologies to be able to link the relationship between the label and the child elements such as an input in this case.", + "
<label>
<input type=\"radio\" name=\"indoor-outdoor\">Indoor
</label>
", + "It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element. For example:", + "
<label for=\"indoor\">
<input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\">Indoor
</label>
", "
", "Add a pair of radio buttons to your form. One should have the option of indoor and the other should have the option of outdoor. Both should share the name attribute of indoor-outdoor." ], @@ -1888,7 +1889,7 @@ "Each of your checkboxes should be nested within its own label element.", "All related checkbox inputs should have the same name attribute.", "Here's an example of a checkbox:", - "<label><input type=\"checkbox\" name=\"personality\"> Loving</label>", + "<label for=\"loving\"><input id=\"loving\" type=\"checkbox\" name=\"personality\"> Loving</label>", "
", "Add to your form a set of three checkboxes. Each checkbox should be nested within its own label element. All three should share the name attribute of personality." ], @@ -1912,8 +1913,8 @@ "
  • other cats
    • ", " ", "
    ", - " ", - "
    ", + " ", + "
    ", " ", " ", "
    ",