code in the text editor we've embedded into this web page.",
- "Do you see the code in the 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>. Closing tags look like this: </h1>. Note that the only difference between opening and closing tags is that closing tags have a slash after their opening angle bracket.",
- "Once you've completed the challenge, 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 the h1 tag's text to say \"Hello World\" instead of \"Hello\"."
+ "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\"."
],
"tests": [
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')"
@@ -165,17 +165,17 @@
"name": "Use the h2 Element",
"difficulty": 0.010,
"description": [
- "Add an h2 tag that says \"CatPhotoApp\" to make a second HTML element below the \"Hello World\" h1 element.",
+ "Add an h2 tag that says \"CatPhotoApp\" to create a second HTML element below your \"Hello World\" h1 element.",
"The h2 element you enter will create an h2 element on the website.",
"This element tells the browser how to render the text that it contains.",
"h2 elements are slightly smaller than h1 elements. There are also h3, h4, h5 and h6 elements."
],
"tests": [
- "assert.isTrue((/cat(\\s)+photo(\\s)+app/gi).test($('h2').text()), 'Your h2 element should have the text \"CatPhotoApp\"')",
+ "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($('h2').text()), 'Your h2 element should have the text \"CatPhotoApp\"')",
"assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your h1 element should have the text \"Hello World\"')"
],
"challengeSeed": [
- "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" + "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0 }, @@ -330,8 +330,8 @@ "description": [ "Change theh2 element's style so that its text color is red.",
"We can do this by changing the style of the h2 element.",
- "The style responsible for the color of an element's text is the \"color\" style.",
- "Here's how you would set the h2 element's text color to blue: <h2 style=\"color: blue\">CatPhotoApp<h2>"
+ "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>"
],
"tests": [
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')"
@@ -339,7 +339,7 @@
"challengeSeed": [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" + "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0 }, @@ -348,13 +348,13 @@ "name": "Use CSS Selectors to Style Elements", "difficulty": 0.018, "description": [ - "Create remove yourh2 element's style tag and write the CSS to make all h2 elements blue.",
+ "Delete your h2 element's style tag and write the CSS to make all h2 elements blue.",
"With CSS, there are hundreds of CSS attributes that you can use to change the way an element looks on a web 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 Cascading Style Sheets (CSS).",
"At the top of your code, create a style tag 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 an 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 the element's styles."
+ "Note that it's important to have 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."
],
"tests": [
"assert($('h2').css('color') === 'rgb(0, 0, 255)', 'Your h2 element should be blue.')",
@@ -363,7 +363,7 @@
"challengeSeed": [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" + "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0 }, @@ -372,12 +372,13 @@ "name": "Use a CSS Class to Style an Element", "difficulty": 0.019, "description": [ - "Create a CSS class called.red-text and apply it to the h2 element.",
+ "Create a CSS class called \"red-text\" and apply it to your h2 element.",
"Classes are reusable styles that can be added to HTML elements.",
"Here's the anatomy of a CSS class:",
- "
",
- "Classes always start with a period. You can see that we've created a CSS class called .blue-text within the <style> tag.",
- "You can apply a class to an element like this: <h2 class=\"blue-text\">CatPhotoApp<h2>",
+ "",
+ "You can see that we've created a CSS class called \"blue-text\" within the <style> tag.",
+ "You can apply a class to an HTML element like this: <h2 class=\"blue-text\">CatPhotoApp<h2>",
+ "Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
"Instead of creating a new Style tag, try removing the h2 style declaration from the existing style element, and replace it with the class declaration for \".red-text\"."
],
"tests": [
@@ -393,7 +394,7 @@
"",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" + "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0 }, @@ -420,7 +421,7 @@ "", "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
" + "Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
" ], "challengeType": 0 }, @@ -429,14 +430,14 @@ "name": "Change the Font Size of an Element", "difficulty": 0.021, "description": [ - "Set the font size of allp elements to 16 pixels",
+ "Create a second p element. Then set the font size of all p elements to 16 pixels.",
"Font size is controlled by the font-size CSS attribute, like this: h1 { font-size: 30px; }.",
"First, create a second paragraph 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.",
- "See if you can figure out how to give both of your paragraph elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your .red-text class."
+ "See if you can figure out how to give both of your paragraph elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your \"red-text\" class."
],
"tests": [
"assert($('p').length > 1, 'You need 2 paragraph elements with Kitty Ipsum text.')",
- "assert($('p').css('font-size') === '16px', 'Your paragraph elements should have be 16px font.')"
+ "assert($('p').css('font-size') === '16px', 'Your paragraph elements should have the font-size of 16px.')"
],
"challengeSeed": [
"