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:",
"",
"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>", "Inside that style element, you can create a
</style>
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>", - "Note that it's important to have both opening and closing curly braces (
h2 {color: red;}
</style>
{
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 {", - "Create a second
font-size: 30px;
}
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
).",
"Notep
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": [