gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

about to start priority and !important waypoints

Browse Source
This commit is contained in:
Quincy Larson
2015-07-28 17:11:51 -07:00
parent 1ef15eb839
commit d7a4f7c2c2
3 changed files with 59 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
challenges/basic-javascript.json
View File

@ -265,7 +265,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb3bdef",
"id": "bd1111c1c11feddfaeb3bdef",
"name": "Magical Maths Addition",
"dashedName": "waypoint-magical-maths-addition",
"difficulty": "9.98141",
@ -289,7 +289,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb4bdef",
"id": "bd1111c1c11feddfaeb4bdef",
"name": "Magical Maths Subtraction",
"dashedName": "waypoint-magical-maths-subtraction",
"difficulty": "9.98142",
@ -313,7 +313,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb5bdef",
"id": "bd1111c1c11feddfaeb5bdef",
"name": "Magical Maths Multiplication",
"dashedName": "waypoint-magical-maths-multiplication",
"difficulty": "9.98143",
@ -337,7 +337,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb6bdef",
"id": "bd1111c1c11feddfaeb6bdef",
"name": "Magical Maths Division",
"dashedName": "waypoint-magical-maths-division",
"difficulty": "9.9814",
@ -361,7 +361,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb4bdef",
"id": "bd1111c1c11feddfaeb4bdee",
"name": "Creating Decimals",
"dashedName": "waypoint-creating-decimals",
"difficulty": "9.9815",
@ -439,7 +439,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb7bdef",
"id": "bd1111c1c11feddfaeb7bdef",
"name": "Nesting Arrays",
"dashedName": "waypoint-nesting-arrays",
"difficulty": "9.98161",
@ -667,7 +667,7 @@
"challengeType": 1
},
{
"id": "bg9997c9c99feddfaeb9bdef",
"id": "bg9997c9c99feddfaeb9bdee",
"name": "Keeping In The Scope Of Things",
"dashedName": "waypoint-keeping-in-the-scope-of-things",
"difficulty": "9.9821",
@ -816,7 +816,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb5bdef",
"id": "bd1111c1c11feddfaeb5bdee",
"name": "Looping with for",
"dashedName": "waypoint-looping-with-for",
"difficulty": "9.9824",
@ -846,7 +846,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb1bdef",
"id": "bd1111c1c11feddfaeb1bdef",
"name": "Looping with while",
"dashedName": "waypoint-looping-with-while",
"difficulty": "9.9825",
@ -877,7 +877,7 @@
"challengeType": 1
},
{
"id": "bh1111c1c11feddfaeb2bdef",
"id": "bd1111c1c11feddfaeb2bdef",
"name": "Looping with do while",
"dashedName": "waypoint-looping-with-do-while",
"difficulty": "9.9826",

19
challenges/get-set-for-free-code-camp.json
View File

@ -156,16 +156,19 @@
},
{
"id": "bd7125d8c441eddfaeb5bd1f",
"name": "Waypoint: Browse our Field Guide",
"dashedName": "waypoint-browse-our-field-guide",
"name": "Waypoint: Browse our Wiki",
"dashedName": "waypoint-browse-our-wiki",
"difficulty": 0.004,
"challengeSeed": ["125407435"],
"description": [
"Free Code Camp has an up-to-date field guide that will answer your many questions.",
"Click the \"Guide\" button in the upper right hand corner.",
"You can browse the field guide at your convenience. Most of its articles take less than 1 minute to read.",
"When you click the \"Guide\" button, it will always take you back to whichever article you were last reading.",
"Read a few field guide articles, then move on to your next challenge."
"Free Code Camp has an up-to-date wiki that will answer your many questions.",
"Click the \"Wiki\" button in the upper right hand corner.",
"You can browse our wiki at your convenience. Most of its articles take less than 1 minute to read.",
"All of our Wiki articles are contributed by our community. You can update our wiki articles, and even create wiki articles of your own.",
"Read <a href=''>Install NPM</a>",
"Read <a href=''>Install NPM</a>",
"Read <a href=''>Install NPM</a>",
"Now you can move on to your next challenge."
],
"challengeType": 2,
"tests": [],
@ -385,7 +388,7 @@
"Next, S - Search Google. Good Google queries take a lot of practice. When you search Google, you usually want to include the language or framework you're using. You also want to limit the results to a recent period.",
"Then, if you still haven't found an answer to your question, A - Ask your friends. If you have trouble, you can ask your fellow campers. We have a special chat room specifically for getting help with tools you learn through these Free Code Camp Challenges. Go to <a href='https://gitter.im/FreeCodeCamp/Help' target='_blank'>https://gitter.im/FreeCodeCamp/Help</a>. Keep this chat open while you work on the remaining challenges.",
"Finally, P - Post on Stack Overflow. Before you attempt to do this, read Stack Overflow's guide to asking good questions: <a href='http://stackoverflow.com/help/how-to-ask'>http://stackoverflow.com/help/how-to-ask</a>.",
"Here's our detailed field guide on getting help: <a href='/field-guide/how-do-i-get-help-when-i-get-stuck' target='_blank'>http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck</a>.",
"Here's our detailed wiki article on getting help: <a href='/field-guide/how-do-i-get-help-when-i-get-stuck' target='_blank'>http://freecodecamp.com/field-guide/how-do-i-get-help-when-i-get-stuck</a>.",
"Now you have a clear algorithm to follow when you need help! Let's start coding! Move on to your next challenge."
],
"challengeType": 2,

77
challenges/html5-and-css.json
View File

@ -1325,9 +1325,8 @@
"dashedName": "waypoint-add-alt-text-to-an-image-for-accessibility",
"difficulty": 0.026,
"description": [
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. Search engines also look at <code>alt</code> attributes.",
"<code>alt</code> attributes, also known as \"alt text\", are what browsers will display if they fail to load the image. <code>alt</code> attributes are also important for blind or visually impaired users to understand what an image portrays. And search engines also look at <code>alt</code> attributes.",
"In short, every image should have an <code>alt</code> attribute!",
"<code>alt</code> attributes are a useful way to tell people (and web crawlers like Google) what is pictured in a photo. It's extremely important for helping blind or visually impaired people understand the content of your website.",
"You can add an <code>alt</code> attribute right in the img element like this: <code>&#60img src=\"www.your-image-source.com/your-image.jpg\" alt=\"your alt text\"/&#62</code>.",
"Add an <code>alt</code> attribute with the text \"A cute orange cat lying on its back\" to our cat photo."
],
@ -1957,9 +1956,9 @@
"dashedName": "waypoint-create-a-set-of-radio-buttons",
"difficulty": 0.034,
"description": [
"You can use radio buttons for questions where you want the user to only give you one answer.",
"You can use \"radio buttons\" for questions where you want the user to only give you one answer.",
"Radio buttons are a type of <code>input</code>.",
"Each of your radio buttons should be wrapped within its own <code>label</code> elements.",
"Each of your radio buttons should be wrapped within its own <code>label</code> element.",
"All related radio buttons should have the same <code>name</code> attribute.",
"Here's an example of a radio button: <code>&#60;label&#62;&#60;input type='radio' name='indoor-outdoor'&#62; Indoor&#60;/label&#62;</code>.",
"Add to your form a pair of radio buttons. Each radio button should be wrapped within its own <code>label</code> element. They should share a common <code>name</code> attribute. One should have the option of \"indoor\" and the other should have the option of \"outdoor\"."
@ -2050,9 +2049,12 @@
"dashedName": "waypoint-create-a-set-of-checkboxes",
"difficulty": 0.035,
"description": [
"Forms commonly use checkbox inputs for questions that may have more than one answer.",
"For example: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>.",
"Add to your form a set of three checkbox elements. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
"Forms commonly use \"checkboxes\" for questions that may have more than one answer.",
"Checkboxes are a type of <code>input</code>.",
"Each of your checkboxes should be wrapped within its own <code>label</code> element.",
"All related checkbox inputs should have the same <code>name</code> attribute.",
"Here's an example of a checkbox: <code>&#60;label&#62;&#60;input type='checkbox' name='personality'&#62; Loving&#60;/label&#62;</code>.",
"Add to your form a set of three checkboxes. Each checkbox should be wrapped within its own <code>label</code> element. All three should share the <code>name</code> attribute of \"personality\"."
],
"tests": [
"assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.')",
@ -2320,9 +2322,9 @@
"dashedName": "waypoint-give-a-background-color-to-a-div-element",
"difficulty": 0.039,
"description": [
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element.",
"You can set an element's background color with the \"background-color\" attribute.",
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element."
"For example, if you wanted an element's background color to be \"green\", you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
"Create a class called \"gray-background\" with the background color of gray. Assign this class to your <code>div</code> element."
],
"tests": [
"assert($('div').hasClass('gray-background'), 'Give your <code>div</code> element the class \"gray-background\".')",
@ -2411,10 +2413,12 @@
"dashedName": "waypoint-adjusting-the-padding-of-an-element",
"difficulty": 0.040,
"description": [
"These next few Waypoints will give you a brief tour of three important aspects of the space surrounding HTML elements: <code>padding</code>, <code>margin</code>, and <code>border</code>. Change the <code>padding</code> of your green box to match that of your red box.",
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
"Three important attributes control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
"When you increase the green box's <code>padding</code>, it will increase the distance between the text \"padding\" and the border around it."
"When you increase the green box's <code>padding</code>, it will increase the distance between the text \"padding\" and the border around it.",
"Change the <code>padding</code> of your green box to match that of your red box."
],
"tests": [
"assert($('.green-box').css('padding-top') === '20px', 'Your <code>green-box</code> class should give elements 20px of padding.')"
@ -2480,10 +2484,10 @@
"dashedName": "waypoint-adjust-the-margin-of-an-element",
"difficulty": 0.041,
"description": [
"Change the <code>margin</code> of the green box to match that of the red box.",
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the green box, making it appear smaller.",
"When you increase the green box's <code>margin</code>, it will increase the distance between its border and surrounding elements."
"When you increase the green box's <code>margin</code>, it will increase the distance between its border and surrounding elements.",
"Change the <code>margin</code> of the green box to match that of the red box."
],
"tests": [
"assert($('.green-box').css('margin-top') === '20px', 'Your <code>green-box</code> class should give elements 20px of margin.')"
@ -2551,10 +2555,10 @@
"dashedName": "waypoint-add-a-negative-margin-to-an-element",
"difficulty": 0.042,
"description": [
"Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it.",
"An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
"If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
"Try to set the <code>margin</code> to a negative value like the one for the red box."
"Try to set the <code>margin</code> to a negative value like the one for the red box.",
"Change the <code>margin</code> of the green box to a negative value, so it fills the entire horizontal width of the yellow box around it."
],
"tests": [
"assert($('.green-box').css('margin-top') === '-15px', 'Your <code>green-box</code> class should give elements -15px of margin.')"
@ -2621,9 +2625,9 @@
"dashedName": "waypoint-add-different-padding-to-each-side-of-an-element",
"difficulty": 0.043,
"description": [
"Give the green box a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes."
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes.",
"Give the green box a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
],
"tests": [
"assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of padding.')",
@ -2764,9 +2768,9 @@
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-padding-of-an-element",
"difficulty": 0.044,
"description": [
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions."
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
],
"tests": [
"assert($('.green-box').css('padding-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>padding</code>.')",
@ -2833,9 +2837,10 @@
"dashedName": "waypoint-use-clockwise-notation-to-specify-the-margin-of-an-element",
"difficulty": 0.045,
"description": [
"Let's try this again, but with <code>margin</code> this time. Use <code>Clockwise Notation</code> to give an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side.",
"Let's try this again, but with <code>margin</code> this time.",
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions."
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
"Use <code>Clockwise Notation</code> to give an element a margin of 40 pixels on its top and left side, but only 20 pixels on its bottom and right side."
],
"tests": [
"assert($('.green-box').css('margin-top') === '40px', 'Your <code>green-box</code> class should give the top of elements 40px of <code>margin</code>.')",
@ -2897,9 +2902,6 @@
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie meinen exakt das gleiche wie die seitenspezifischen Anweisungen."
]
},
{
"id": "bad87fee1348bd9aedf08736",
"name": "Waypoint: Style the HTML Body Element",
@ -2908,8 +2910,8 @@
"description": [
"Now let's start fresh and talk about CSS inheritance.",
"Every HTML page has <code>body</code> element.",
"We can prove that the <code>body</code> element exists here by giving it a \"background-color\" of blue.",
"We can do this by adding <code>body { background-color: blue; }</code> to our <code>style</code> element."
"We can prove that the <code>body</code> element exists here by giving it a \"background-color\" of black.",
"We can do this by adding <code>body { background-color: black; }</code> to our <code>style</code> element."
],
"tests": [
"assert($('body').css('background-color') === 'rgb(0, 0, 0)', 'Give your <code>body</code> element the background-color of black.')"
@ -2939,20 +2941,20 @@
"dashedName": "waypoint-inherit-styles-from-the-body-element",
"difficulty": 0.047,
"description": [
"Every HTML page has <code>body</code> element.",
"You can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
"Let's prove this by creating a <code>h2</code> element with the text \"somebody\".",
"Then, let's add the font family of \"Monospace\" to the our <code>body</code> element's style declaration.",
"See how this gives our <code>h2</code> element the font-family of "
"Now we've proven that every HTML page has a <code>body</code> element, and that its <code>body</code> element can also be styled with CSS.",
"Remember, you can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
"First, create a <code>h1</code> element with the text \"Hello World\".",
"Then, let's give all elements on your page the color of \"green\" by adding <code>color: green;</code> to your <code>body</code> element's style declaration.",
"Finally, give your <code>body</code> element the font-family of \"Monospace\" by adding <code>font-family: Monospace;</code> to your <code>body</code> element's style declaration."
],
"tests": [
"assert(($('body').css('color') === 'rgb(0, 128, 0)'), 'Give your <code>body</code> element the \"color\" attribute of green.')",
"assert(($('body').css('font-family').match(/Monospace/i)), 'Give your <code>body</code> element the \"font-family\" attribute of \"Monospace\".')",
"assert(($('h1').length > 0), 'Create an <code>h1</code> element.')",
"assert(($('h1').length > 0 && $('h1').text().match(/hello world/i)), 'Your <code>h1</code> element should have the text \"Hello World\".')",
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
"assert(($('body').css('color') === 'rgb(0, 128, 0)'), 'Give your <code>body</code> element the \"color\" attribute of green.')",
"assert(($('body').css('font-family').match(/Monospace/i)), 'Give your <code>body</code> element the \"font-family\" attribute of \"Monospace\".')",
"assert(($('h1').length > 0 && $('h1').css('font-family').match(/monospace/i)), 'Your <code>h1</code> element should inherit the font \"Monospace\" from your <code>body</code> element.')",
"assert(($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'), 'Your <code>h1</code> element should inherit the color green.')",
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')"
"assert(($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)'), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
],
"challengeSeed": [
"<style>",
@ -3020,10 +3022,7 @@
"difficulty": 0.049,
"description": [
"HTML has an element that is automatically a part of every web page called the <code>body</code> element.",
"You can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles.",
"Let's prove this by creating a <code>h2</code> element with the text \"somebody\".",
"Then, let's add the font family of \"Monospace\" to the our <code>body</code> element's style declaration.",
"See how this gives our <code>h2</code> element the font-family of "
"You can style your <code>body</code> element just like any other HTML element, and all your other elements will inherit your <code>body</code> element's styles."
],
"tests": [
"assert($('h1').hasClass('pink-text'), 'Your <code>h1</code> element should have the class \"pink-text\".')",