diff --git a/challenges/01-front-end-development-certification/bootstrap.json b/challenges/01-front-end-development-certification/bootstrap.json index c8832c7ab55..c8ea98fb5ee 100644 --- a/challenges/01-front-end-development-certification/bootstrap.json +++ b/challenges/01-front-end-development-certification/bootstrap.json @@ -8,7 +8,7 @@ "id": "bad87fee1348bd9acde08712", "title": "Use Responsive Design with Bootstrap Fluid Containers", "description": [ - "In the HTML5 and CSS section of FreeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.", + "In the HTML5 and CSS section of FreeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.", "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", "With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.", "You can add Bootstrap to any app just by including it by adding the following code to the top of your HTML:", @@ -1149,7 +1149,7 @@ "id": "bad87fee1348bd9aedd08845", "title": "Add Font Awesome Icons to our Buttons", "description": [ - "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", + "Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the .svg file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.", "You can add Font Awesome to any app just by including it by adding the following code to the top of your HTML:", "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/>", "In this case, we've already added it for you to this page behind the scenes.", diff --git a/challenges/01-front-end-development-certification/html5-and-css.json b/challenges/01-front-end-development-certification/html5-and-css.json index 21caa81e9d0..5e89efbdee2 100644 --- a/challenges/01-front-end-development-certification/html5-and-css.json +++ b/challenges/01-front-end-development-certification/html5-and-css.json @@ -61,9 +61,8 @@ "title": "Say Hello to HTML Elements", "description": [ "Welcome to Free Code Camp's first coding challenge.", - "If you see a term or phrase with a green background, click or tab onto it to see a definition", - "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.", + "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>", @@ -133,10 +132,10 @@ ], "title": "Headline with the h2 Element", "description": [ - "Over the next few challenges, we'll build an HTML5 app that will look something like this:", + "Over the next few challenges, we'll build an HTML5 app that will look something like this:", "\"A", "The h2 element you enter will create an h2 element on the website.", - "This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different and new sections.", + "This element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings. There are also h3, h4, h5 and h6 elements to indicate different and new sections.", "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element." ], "challengeSeed": [ @@ -565,14 +564,14 @@ ], "title": "Use CSS Selectors to Style Elements", "description": [ - "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", + "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your 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 CSS, which stands for Cascading Style Sheets.", "At the top of your code, create a style element 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 both 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.", + "Note that it's important to have both 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.", "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue." ], "challengeSeed": [ @@ -790,8 +789,8 @@ "description": [ "Font size is controlled by the font-size CSS property, like this:", "
h1 {
  font-size: 30px;
}
", - "Create a second p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", - "Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).", + "Create a second p element after the existing p element with the following kitty ipsum text: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.", + "Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).", "Note
Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.", "Also, please do not add a class attribute to your new p element." ], @@ -918,7 +917,7 @@ "title": "Import a Google Font", "description": [ "Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).", - "First, you'll need to make a call to Google to grab the Lobster font and load it into your HTML.", + "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 the top of your code editor:", "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Now you can set Lobster as a font-family value on your h2 element.", @@ -1064,7 +1063,7 @@ ], "title": "Add Images to your Website", "description": [ - "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", + "You can add images to your website by using the img element, and point to a specific image's URL using the src attribute.", "An example of this would be:", "<img src=\"https://www.your-image-source.com/your-image.jpg\">", "Note that in most cases, img elements are self-closing.", @@ -1628,7 +1627,7 @@ "title": "Make Dead Links using the Hash Symbol", "description": [ "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.", + "This is also handy when you're changing the behavior of a link using jQuery, which we'll learn about later.", "Replace the value of your a element's href attribute with a #, also known as a hash symbol, to turn it into a dead link." ], "challengeSeed": [ @@ -2270,7 +2269,7 @@ ], "title": "Create a Form Element", "description": [ - "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.", + "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>", "Nest your text field in a form element. Add the action=\"/submit-cat-photo\" attribute to this form element." @@ -4716,4 +4715,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/challenges/01-front-end-development-certification/jquery.json b/challenges/01-front-end-development-certification/jquery.json index 80aeafbd6f1..0dc48a11c52 100644 --- a/challenges/01-front-end-development-certification/jquery.json +++ b/challenges/01-front-end-development-certification/jquery.json @@ -14,7 +14,7 @@ "Your browser will run any JavaScript inside a script element, including jQuery.", "Inside your script element, add this code: $(document).ready(function() { to your script. Then close it on the following line (still inside your script element) with: });", "We'll learn more about functions later. The important thing to know is that code you put inside this function will run as soon as your browser has loaded your page.", - "This is important because without your document ready function, your code may run before your HTML is rendered, which would cause bugs." + "This is important because without your document ready function, your code may run before your HTML is rendered, which would cause bugs." ], "challengeSeed": [ "", @@ -915,7 +915,7 @@ "jQuery has a function called clone() that makes a copy of an element.", "For example, if we wanted to copy target2 from our left-well to our right-well, we would use:", "$(\"#target2\").clone().appendTo(\"#right-well\");", - "Did you notice this involves sticking two jQuery functions together? This is called method chaining and it's a convenient way to get things done with jQuery.", + "Did you notice this involves sticking two jQuery functions together? This is called function chaining and it's a convenient way to get things done with jQuery.", "Clone your target5 element and append it to your left-well." ], "challengeSeed": [