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

ton of html hotfixes

Browse Source
This commit is contained in:
Quincy Larson
2015-05-29 16:54:39 -07:00
parent 8b79a56135
commit c8a9c2f009
4 changed files with 22 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
seed_data/challenges/basic-html5-and-css.json
View File

@ -383,7 +383,7 @@
"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.",
"Remember that "
"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>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>."
],
"tests": [
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')",
@ -426,6 +426,7 @@
],
"tests": [
"assert($('p').length > 1, 'You need 2 paragraph 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.')"
],
"challengeSeed": [
@ -503,7 +504,9 @@
"Now you can set \"Lobster\" as a font-family attribute on your <code>h2</code> element."
],
"tests": [
"assert($('h2').css('font-family').match(/lobster/i), 'Your h2 element should use the font \"Lobster\".')"
"assert(new RegExp('googleapis', 'gi').test(editor), 'Import the \"Lobster\" font.')",
"assert($('h2').css('font-family').match(/lobster/i), 'Your <code>h2</code> element should use the font \"Lobster\".')",
"assert($('p').css('font-family').match(/monospace/i), 'Your <code>p</code> element should still use the font \"Monospace\".')"
],
"challengeSeed": [
"<style>",
@ -588,8 +591,8 @@
"name": "Waypoint: Override Styles with Important",
"difficulty": 0.025,
"description": [
"Create a \"blue-text\" class that gives an element the font-color of blue. Also create a \"urgently-red\" class that give an element the font-color of red, but use <code>!important</code> to ensure the element is rendered as being red. Apply both classes to your <code>h2</code> element.",
"You can add more than one class to an element by seperating the class declarations with a space, like this: <code>&#60;h2 class='green-text giant-text'&#62;This will be giant green text&#60;/h2&#62;</code>.",
"Create a \"blue-text\" class that gives an element the font-color of blue. Also create an \"urgently-red\" class that gives an element the font-color of red, but add <code>!important</code> to the class to ensure the element is rendered as being red. Apply both classes to your <code>h2</code> element.",
"You can add more than one class to an element by separating the class declarations with a space, like this: <code>&#60;h2 class='green-text giant-text'&#62;This will be giant green text&#60;/h2&#62;</code>.",
"Sometimes HTML elements will receive conflicting information from CSS classes as to how they should be styled.",
"If there's a conflict in the CSS, the browser will use whichever style declaration is closest to the bottom of the CSS document (whichever declaration comes last). Note that in-line style declarations are the final authority in how an HTML element will be rendered.",
"There's one way to ensure that an element is rendered with a certain style, regardless of where that declaration is located. That one way is to use <code>!important</code>.",
@ -598,9 +601,9 @@
"Now see if you can make sure the h2 element is rendered in the color red without removing the \"blue-text\" class, doing an in-line styling, or changing the sequence of CSS class declarations."
],
"tests": [
"assert(new RegExp('.blue-text', 'gi').test(editor), 'Ensure you implemented the css class \".blue-text\"')",
"assert(new RegExp('.urgently-red', 'gi').test(editor), 'Ensure you implemented the css class \".urgently-red\"')",
"assert(new RegExp('red !important', 'gi').test(editor), 'Ensure you added the \"!important\" declaration!')",
"assert(new RegExp('.blue-text', 'gi').test(editor), 'Create the CSS class \"blue-text\"')",
"assert(new RegExp('.urgently-red', 'gi').test(editor), 'Create the CSS class \"urgently-red\"')",
"assert(new RegExp('red.?!important', 'gi').test(editor), 'Add the \"!important\" declaration!')",
"assert($('h2').hasClass('blue-text'), 'Your h2 element should have the class \"blue-text\".')",
"assert($('h2').hasClass('urgently-red'), 'Your h2 element should have the class \"urgently-red\".')",
"assert($('h2').css('color') === 'rgb(255, 0, 0)', 'Your h2 element should be red.')"
@ -741,14 +744,15 @@
"name": "Waypoint: Add Borders Around your Elements",
"difficulty": 0.028,
"description": [
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply it to your cat photo.",
"Create a class called \"thick-green-border\" that puts a 10-pixel-wide green border with a style of \"solid\" around an HTML element, and apply that class to your cat photo.",
"CSS borders have attributes like style, color and width.",
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code>&#60;style&#62; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</code>."
],
"tests": [
"assert($('img').hasClass('smaller-image'), 'Your <code>img</code> element should have the class \"smaller-image\".')",
"assert($('img').hasClass('thick-green-border'), 'Your <code>img</code> element should have the class \"thick-green-border\".')",
"assert(parseInt($('img').css('border-width')) >= 9 && new RegExp('solid').test($('img').css('border-style')), 'You need to specify a border width of 10px and a border style of \"solid\".')"
"assert(parseInt($('img').css('border-top-width')), 'Give your image a border width of 10px.')",
"assert(new RegExp('border-style:.?solid', 'gi').test(editor), 'Give your image a border style of \"solid\".')"
],
"challengeSeed": [
"<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>",

2
seed_data/challenges/bootstrap.json
View File

@ -1325,7 +1325,7 @@
"name": "Waypoint: Line up Form Elements Responsively with Bootstrap",
"difficulty": 0.062,
"description": [
"Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a \"row\" element with \"col-xs-*\" elements withing it.",
"Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a \"row\" element with \"col-xs-*\" elements within it.",
"Wrap both your form's text input field and submit button within a div with the class \"row\". Wrap your form's text input field within a div with the class of \"col-xs-7\". Wrap your form's submit button the in a div with the class \"col-xs-5\".",
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
],

12
seed_data/challenges/full-stack-javascript.json
View File

@ -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>how-to-npm</code>",
"Now start this tutorial by running <code>npm install how-to-npm@1.2.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>.",
"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\"",
"Complete \"Login\"",
@ -144,16 +145,15 @@
"Complete \"Listing Dependencies\"",
"Complete \"NPM Test\"",
"Complete \"Package Niceties\"",
"Complete \"Publish\". Note that you may have to return to the \"Dev Environment\" challenge and run <code>npm adduser</code> first.",
"Complete \"Version\". Note that <code>npm version</code> is supposed to automatically update your <code>package.json</code> but it doesn’t. You have to manually edit the version number in your <code>package.json</code> before you can verify and continue.",
"Complete \"Publish\"",
"Complete \"Version\"",
"Complete \"Publish Again\"",
"Complete \"Dist Tag\"",
"Complete \"Dist Tag Removal\"",
"Complete \"Outdated\". Note that <code>npm outdated</code> produces no result, so you you may have to guess the outdated package, or ask how-to-npm to reveal the answer.",
"Complete \"Outdated\"",
"Complete \"Update\"",
"Complete \"RM\"",
"Complete \"Finale\"",
"Once you've completed these first 7 challenges, move on to our next waypoint."
"Complete \"Finale\""
],
"challengeType": 2,
"tests": [],

1
seed_data/field-guides.json
View File

@ -302,6 +302,7 @@
" <li><a href='https://www.facebook.com/groups/free.code.camp.bogota/' target='_blank'>Bogota</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.boston/' target='_blank'>Boston</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.boulder/' target='_blank'>Boulder</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.brasilia/' target='_blank'>Brasilia</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.bratislava/' target='_blank'>Bratislava</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.brussels/' target='_blank'>Brussels</a></li>",
" <li><a href='https://www.facebook.com/groups/free.code.camp.buenos.aires/' target='_blank'>Buenos Aires</a></li>",