diff --git a/seed/challenges/getting-started.json b/seed/challenges/getting-started.json
index d6ba3d1e94..3a0d244209 100644
--- a/seed/challenges/getting-started.json
+++ b/seed/challenges/getting-started.json
@@ -253,7 +253,7 @@
[
"http://i.imgur.com/ZRgXraT.gif",
"A gif showing us scrolling through our challenge map.",
- "Now you're ready to start coding.
The \"Map\" button in your upper right hand corner will show you our challenge map. This map shows all our coding challenges.
We recommend that you complete these from top to bottom, at a sustainable pace.
Our curriculum is constantly being improved by our open source community, so don't be surprised if challenges move around or change.
You can always navigate back to your most recent challenge by clicking the \"Learn\" button.",
+ "Now you're ready to start coding.
The \"Map\" button in your upper right hand corner will show you our challenge map.
We recommend that you complete these from top to bottom, at a sustainable pace.
Our open source community is constantly improving our challenges, so don't be surprised if they change or move around. Don't worry about going back - just keep moving forward.
You can always go to your most recent challenge by clicking the \"Learn\" button.",
""
]
],
diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json
index 22f99eb110..f3e138ba0a 100644
--- a/seed/challenges/html5-and-css.json
+++ b/seed/challenges/html5-and-css.json
@@ -7,12 +7,12 @@
"id": "bd7123c8c441eddfaeb5bdef",
"title": "Say Hello to HTML Elements",
"description": [
- "Welcome to Free Code Camp's first coding challenge!",
+ "Welcome to Free Code Camp's first coding challenge.",
"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
",
+ "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>
. Closing tags look like this: </h1>
. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
- "Once you've completed each challenge, and all its tests are passing, the \"Go to my next challenge\" button will become enabled. Click it - or press control and enter at the same time - to advance to the next challenge.",
- "To enable the \"Go to my next challenge\" button on this exercise, change your h1
tag's text to say \"Hello World\" instead of \"Hello\"."
+ "Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing, you can advance to the next challenge.",
+ "To pass the test on this challenge, change your h1
element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button."
],
"tests": [
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1
element should have the text \"Hello World\".')"
@@ -101,7 +101,8 @@
"title": "Inform with the Paragraph Element",
"description": [
"p
elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
- "You can create a p
element like so: <p>I'm a p tag!</p>
",
+ "You can create a p
element like this:",
+ "<p>I'm a p tag!</p>
",
"Create a p
element below your h2
element, and give it the text \"Hello Paragraph\"."
],
"tests": [
@@ -235,9 +236,9 @@
"id": "bad87fee1348bd9aedf08833",
"title": "Fill in the Blank with Placeholder Text",
"description": [
- "Web developers traditionally use lorem ipsum text
as placeholder text. It's called lorem ipsum text
because those are the first two words of a famous passage by Cicero of Ancient Rome.",
- "lorem ipsum text
has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
- "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text
",
+ "Web developers traditionally use lorem ipsum text
as placeholder text. It's called lorem ipsum text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
+ "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
+ "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called kitty ipsum text
.",
"Replace the text inside your p
element with the first few words of this kitty ipsum text: Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
"
],
"tests": [
@@ -327,7 +328,8 @@
"Now let's change the color of some of our text.",
"We can do this by changing the style
of your h2
element.",
"The style that is responsible for the color of an element's text is the \"color\" style.",
- "Here's how you would set your h2
element's text color to blue: <h2 style=\"color: blue\">CatPhotoApp</h2>
",
+ "Here's how you would set your h2
element's text color to blue:",
+ "<h2 style=\"color: blue\">CatPhotoApp</h2>
",
"Change your h2
element's style so that its text color is red."
],
"tests": [
@@ -369,7 +371,9 @@
"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>
",
+ "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;}
",