fix typos and improve copy up through google font challenge
This commit is contained in:
Quincy Larson
@ -39,7 +39,7 @@
|
||||
"difficulty": 0.010,
|
||||
"description": [
|
||||
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element.",
|
||||
"The h2 element you enter will create an h2 element on the website.",
|
||||
"The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
|
||||
"This element tells the browser how to render the text that it contains.",
|
||||
"<code>h2</code> elements are slightly smaller than <code>h1</code> elements. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements."
|
||||
],
|
||||
@ -69,13 +69,13 @@
|
||||
"name": "Waypoint: Inform with the Paragraph Element",
|
||||
"difficulty": 0.011,
|
||||
"description": [
|
||||
"Create a paragraph element below your h2 element, and give it the text \"Hello Paragraph\". As soon as you create the opening <code><p></code> tag, one of our tests will pass (since this is valid HTML). Be sure to close the element by adding a closing <code></p></code> tag.",
|
||||
"Paragraph elements are the preferred element for normal-sized paragraph text on websites.",
|
||||
"You can create a paragraph element like so: <code><p>I'm a p tag!</p></code>"
|
||||
"Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\".",
|
||||
"<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
|
||||
"You can create a <code>p</code> element like so: <code><p>I'm a p tag!</p></code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(($('p').length > 0), 'Create a <code>p</code> element.')",
|
||||
"assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\"')",
|
||||
"assert.isTrue((/hello(\\s)+paragraph/gi).test($('p').text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".')",
|
||||
"assert(new RegExp('</p>', 'gi').test(editor), 'Be sure to complete your <code>p</code> element with a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -99,13 +99,13 @@
|
||||
"name": "Waypoint: Visually Separate Elements with Line Breaks",
|
||||
"difficulty": 0.012,
|
||||
"description": [
|
||||
"Add a <code>line break</code> between the <code><h2></code> and <code><p></code> elements.",
|
||||
"You can create a line break element with <code><br/></code>.",
|
||||
"Note that <code><br/></code> has no closing tag. It is a <code>self-closing</code> element. See how a forward-slash precedes the closing bracket?",
|
||||
"You'll encounter other <code>self-closing</code> element tags soon."
|
||||
"Add a <code>br</code> element to your page, preferably between two of your elements.",
|
||||
"<code>br</code> elements, also known as \"line break\" elements, can be created with <code><br></code>.",
|
||||
"Note that <code><br></code> has no closing tag. It is a \"self-closing\" element.",
|
||||
"You'll encounter other self-closing element tags soon."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($('br').length > 0), 'Add a <code>br</code> element between your <code>h2</code> and <code>p</code> elements.')"
|
||||
"assert(($('br').length > 0), 'Add a <code>br</code> element to your page, preferably between two of your elements.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>",
|
||||
@ -129,15 +129,15 @@
|
||||
"name": "Waypoint: Uncomment HTML",
|
||||
"difficulty": 0.013,
|
||||
"description": [
|
||||
"Uncomment the <code>h1</code>, <code>h2</code> and <code>p</code> elements.",
|
||||
"Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements.",
|
||||
"Commenting is a way that you can leave comments within your code without affecting the code itself.",
|
||||
"Commenting is also a convenient way to make code inactive without having to delete it entirely.",
|
||||
"You can start a comment with <code><!--</code> and end a comment with <code>--></code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('h1').length > 0, 'Your <code>h1</code> element should not be commented. It should be visible in the browser.')",
|
||||
"assert($('h2').length > 0, 'Your <code>h2</code> element should not be commented. It should be visible in the browser.')",
|
||||
"assert($('p').length > 0, 'Your <code>p</code> element should not be commented. It should be visible in the browser.')",
|
||||
"assert($('h1').length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.')",
|
||||
"assert($('h2').length > 0, 'Make your <code>h2</code> element visible on your page by uncommenting it.')",
|
||||
"assert($('p').length > 0, 'Make your <code>p</code> element visible on your page by uncommenting it.')",
|
||||
"assert(!new RegExp('-->', 'gi').test(editor), 'Be sure to delete the <code>--></code> that ends the comment.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -168,14 +168,14 @@
|
||||
"name": "Waypoint: Comment out HTML",
|
||||
"difficulty": 0.014,
|
||||
"description": [
|
||||
"Comment out the <code>h1</code> element and the <code>p</code> element, but leave the <code>h2</code> element uncommented.",
|
||||
"Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented.",
|
||||
"Remember that in order to start a comment, you need to use <code><!--</code> and to end a comment, you need to use <code>--></code>.",
|
||||
"Here you'll need to end the comment before the h2 element begins."
|
||||
"Here you'll need to end the comment before your <code>h2</code> element begins."
|
||||
],
|
||||
"tests": [
|
||||
"assert(($('h1').length == 0), 'The h1 element should be commented. It should not be visible in the browser.')",
|
||||
"assert(($('h2').length > 0), 'The h2 element should not commented. It should be visible in the browser.')",
|
||||
"assert(($('p').length == 0), 'The paragraph element should be commented. It should not be visible in the browser.')"
|
||||
"assert(($('h1').length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.')",
|
||||
"assert(($('h2').length > 0), 'Leave your <code>h2</code> element uncommented so that is not visible on your page.')",
|
||||
"assert(($('p').length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<!--",
|
||||
@ -205,14 +205,14 @@
|
||||
"name": "Waypoint: Fill in the Blank with Placeholder Text",
|
||||
"difficulty": 0.015,
|
||||
"description": [
|
||||
"Change the text in the <code>p</code> element to use the first few words of <code>Kitty Ipsum</code> text.",
|
||||
"Web developers traditionally use <code>Lorem Ipsum</code> as placeholder text. It's called <code>Lorem Ipsum</code> text because those are the first two words of a famous passage by Cicero of Ancient Rome.",
|
||||
"<code>Lorem Ipsum</code> 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 <a href='http://kittyipsum.com/'>Kitty Ipsum</a>!",
|
||||
"Here are the first few words of Kitty Ipsum text, which you can copy and paste into the right position: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||||
"Replace the text inside your <code>p</code> element with the first few words of the provided \"Ktty 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\"!",
|
||||
"Here are the first few words of \"Kitty Ipsum\" text, which you can copy and paste into the right position: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided Kitty Ipsum text.')"
|
||||
"assert.isTrue((/Kitty(\\s)+ipsum(\\s)+dolor/gi).test($('p').text()), 'Your <code>p</code> element should contain the first few words of the provided \"Kitty Ipsum\" text.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h1>Hello World</h1>",
|
||||
@ -241,7 +241,7 @@
|
||||
"difficulty": 0.016,
|
||||
"description": [
|
||||
"Delete your <code>h1</code> and <code>br</code> elements so we can simplify our view.",
|
||||
"Our phone doesn't have much space vertical space.",
|
||||
"Our phone doesn't have much vertical space.",
|
||||
"Let's remove the unnecessary elements so we can start building our CatPhotoApp."
|
||||
],
|
||||
"tests": [
|
||||
@ -276,10 +276,10 @@
|
||||
"name": "Waypoint: Change the Color of Text",
|
||||
"difficulty": 0.017,
|
||||
"description": [
|
||||
"Change the <code>h2</code> element's style so that its text color is red.",
|
||||
"We can do this by changing the <code>style</code> of the <code>h2</code> element.",
|
||||
"Change your <code>h2</code> element's style so that its text color is red.",
|
||||
"We can do this by changing the \"style\" of your <code>h2</code> 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 <code>h2</code> element's text color to blue: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>"
|
||||
"Here's how you would set your <code>h2</code> element's text color to blue: <code><h2 style=\"color: blue\">CatPhotoApp</h2></code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')"
|
||||
@ -306,17 +306,17 @@
|
||||
"name": "Waypoint: Use CSS Selectors to Style Elements",
|
||||
"difficulty": 0.018,
|
||||
"description": [
|
||||
"Delete your <code>h2</code> element's <code>style</code> tag and write the CSS to make all <code>h2</code> elements blue.",
|
||||
"With CSS, there are hundreds of <code>CSS attributes</code> that you can use to change the way an element looks on a web page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, you were giving that individual h2 element an <code>inline style</code>",
|
||||
"That's one way to add style to an element, but a better way is by using <code>Cascading Style Sheets (CSS)</code>.",
|
||||
"At the top of your code, create a <code>style tag</code> like this: <code><style></style></code>",
|
||||
"Inside that style element, you can create a <code>css selector</code> for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code><style>h2 {color: red;}</style></code>",
|
||||
"Note that it's important to have <code>opening and closing curly braces</code> (<code>{</code> and <code>}</code>) 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 <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
|
||||
"With CSS, there are hundreds of CSS \"attributes\" that you can use to change the way an element looks on your page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp<h2></code>, you were giving that individual <code>h2</code> 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 <code>style</code> element like this: <code><style></style></code>",
|
||||
"Inside that style element, you can create a \"CSS selector\" for all <code>h2</code> elements. For example, if you wanted all <code>h2</code> elements to be red, your style element would look like this: <code><style>h2 {color: red;}</style></code>",
|
||||
"Note that it's important to have both opening and closing curly braces (<code>{</code> and <code>}</code>) 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 <code>h2</code> element should be blue.')",
|
||||
"assert(!$('h2').attr('style'), 'You should remove the style attribute from your <code>h2</code> element.')"
|
||||
"assert(!$('h2').attr('style'), 'Remove the style attribute from your <code>h2</code> element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<h2 style='color: red'>CatPhotoApp</h2>",
|
||||
@ -344,14 +344,14 @@
|
||||
"Classes are reusable styles that can be added to HTML elements.",
|
||||
"Here's the anatomy of a CSS class:",
|
||||
"<img class='img-responsive' alt='a diagram of how style tags are composed, which is also described in detail on the following lines.' src='https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png'/>",
|
||||
"You can see that we've created a CSS class called \"blue-text\" within the <code><style></code> tag.",
|
||||
"Here you can see that we've created a CSS class called \"blue-text\" within the <code><style></code> tag.",
|
||||
"You can apply a class to an HTML element like this: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>",
|
||||
"Note that in your CSS <code>style</code> 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 <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, and replace it with the class declaration for \".red-text\"."
|
||||
"Instead of creating a new <code>style</code> element, try removing the <code>h2</code> style declaration from your existing style element, then replace it with the class declaration for \".red-text\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')",
|
||||
"assert($('h2').hasClass('red-text'), 'You <code>h2</code> element should have the class \"red-text\".')"
|
||||
"assert($('h2').hasClass('red-text'), 'Your <code>h2</code> element should have the class \"red-text\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -381,15 +381,15 @@
|
||||
"name": "Waypoint: Style Multiple Elements with a CSS Class",
|
||||
"difficulty": 0.020,
|
||||
"description": [
|
||||
"Apply the \"red-text\" class to the <code>h2</code> and <code>p</code> elements.",
|
||||
"Remember that you can attach classes to HTML elements by using the <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||||
"Apply the \"red-text\" class to your <code>h2</code> and <code>p</code> elements.",
|
||||
"Remember that you can attach classes to HTML elements by using <code>class=\"your-class-here\"</code> within the relevant element's opening tag.",
|
||||
"Remember that CSS selectors require a period at the beginning like this: <code>.red-text { color: blue; }</code>, but that class declarations don't use a period, like this: <code><h2 class=\"blue-text\">CatPhotoApp<h2></code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')",
|
||||
"assert($('h2').hasClass('red-text'), 'You h2 element should have the class \"red-text\".')",
|
||||
"assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your paragraph element should be red.')",
|
||||
"assert($('p').hasClass('red-text'), 'You paragraph element should have the class \"red-text\".')"
|
||||
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your <code>h2</code> element should be red.')",
|
||||
"assert($('h2').hasClass('red-text'), 'Your <code>h2</code> element should have the class \"red-text\".')",
|
||||
"assert($('p').css('color') === 'rgb(255, 0, 0)', 'Your <code>p</code> element should be red.')",
|
||||
"assert($('p').hasClass('red-text'), 'Your <code>p</code> element should have the class \"red-text\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -419,15 +419,15 @@
|
||||
"name": "Waypoint: Change the Font Size of an Element",
|
||||
"difficulty": 0.021,
|
||||
"description": [
|
||||
"Create a second <code>p</code> element. Then, inside your <code><style></code> element, set the font size of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"First, create a second paragraph element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"See if you can figure out how to give both of your paragraph elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your \"red-text\" class."
|
||||
"Create a second <code>p</code> element. Then, inside your <code><style></code> element, set the \"font-size\" of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the \"font-size\" CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"First, create a second <code>p</code> element with the following Kitty Ipsum text: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> 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').length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.')",
|
||||
"assert(editor.match(/<\\/p>/g).length > 1, 'Be sure that each of your <code>p</code> elements has a closing tag.')",
|
||||
"assert($('p').css('font-size') === '16px', 'Your paragraph elements should have the font-size of 16px.')"
|
||||
"assert($('p').css('font-size') === '16px', 'Give your <code>p</code> elements the font-size of 16px.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -457,12 +457,12 @@
|
||||
"name": "Waypoint: Set the Font Family of an Element",
|
||||
"difficulty": 0.022,
|
||||
"description": [
|
||||
"Make all paragraph elements use the \"Monospace\" font.",
|
||||
"You can set an element's font by using the <code>font-family</code> attribute.",
|
||||
"For example, if you wanted to set your h2 element's font to \"Sans-serif\", you would use the following CSS: <code>h2 { font-family: 'Sans-serif'; }</code>"
|
||||
"Make all of your <code>p</code> elements use the \"Monospace\" font.",
|
||||
"You can set an element's font by using the \"font-family\" attribute.",
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to \"Sans-serif\", you would use the following CSS: <code>h2 { font-family: 'Sans-serif'; }</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($('p').css('font-family').match(/monospace/i), 'Your paragraph elements should use the font \"Monospace\".')"
|
||||
"assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> elements should use the font \"Monospace\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<style>",
|
||||
@ -498,7 +498,7 @@
|
||||
"difficulty": 0.023,
|
||||
"description": [
|
||||
"Apply the <code>font-family</code> of \"Lobster\" to your <code>h2</code> element.",
|
||||
"First, you'll need to make a <code>call</code> 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 your code editor above your <code>style</code> element:",
|
||||
"<code><link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'></code>",
|
||||
"Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element."
|
||||
|
||||
@ -133,9 +133,10 @@
|
||||
"Click the \"Start Editing\" button.",
|
||||
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
|
||||
"Run this command: <code>npm install how-to-npm -g</code>",
|
||||
"Now start this tutorial by running <code>npm install how-to-npm@1.2.0</code>.",
|
||||
"Now start this tutorial by running <code>npm install how-to-npm@2.0.0</code>.",
|
||||
"Note that you can resize the c9.io's windows by dragging their borders.",
|
||||
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
|
||||
"Note that you can only add dist tags to the specific version numbers published in steps 8 and 10. If you receive a 403 or 404 error, run <code>how-to-npm</code> and try again.",
|
||||
"Also, if you experience a bug, and you think you understand the concept, you can skip a step by running <code>how-to-npm verify skip</code> in the terminal.",
|
||||
"Complete \"Install NPM\"",
|
||||
"Complete \"Dev Environment\"",
|
||||
|
||||
Reference in New Issue
Block a user