Merge pull request freeCodeCamp#4114 from ltegman/fix/sidebar-indenta…

…tion-character Fix Sidebar Code Indentation Character
Adrianod16 · Nov 2, 2015 · 3b04646 · 3b04646
2 parents c49c462 + 4959675
commit 3b04646
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 63 deletions.
diff --git a/seed/challenges/basic-javascript.json b/seed/challenges/basic-javascript.json
@@ -653,7 +653,7 @@
         "In JavaScript, we can divide up our code into reusable parts called functions.",
         "Here's an example of a function:",
         "<code>function functionName(a, b) {</code>",
-        "<code>&thinsp;&thinsp;return a + b;</code>",
+        "<code>&nbsp;&nbsp;return a + b;</code>",
         "<code>}</code>",
         "After writing the above lines in our code, we can then pass values to our function and the result following the <code>return</code> statement will be returned.",
         "For example, we can pass numbers <code>4</code> and <code>2</code> by “calling” the function later in our code like this: <code>functionName(4, 2)</code>.",
@@ -694,10 +694,10 @@
         "Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
         "Here's a sample object:",
         "<code>var cat = {</code>",
-        "<code>&thinsp;&thinsp;\"name\": \"Whiskers\",</code>",
-        "<code>&thinsp;&thinsp;\"legs\": 4,</code>",
-        "<code>&thinsp;&thinsp;\"tails\": 1,</code>",
-        "<code>&thinsp;&thinsp;\"enemies\": [\"Water\", \"Dogs\"]</code>",
+        "<code>&nbsp;&nbsp;\"name\": \"Whiskers\",</code>",
+        "<code>&nbsp;&nbsp;\"legs\": 4,</code>",
+        "<code>&nbsp;&nbsp;\"tails\": 1,</code>",
+        "<code>&nbsp;&nbsp;\"enemies\": [\"Water\", \"Dogs\"]</code>",
         "<code>};</code>",
         "</code>",
         "Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
@@ -741,10 +741,10 @@
         "After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable.",
         "For example, let's look at <code>ourDog</code>:",
         "<code>var ourDog = {</code>",
-        "<code>&thinsp;&thinsp;\"name\": \"Camper\",</code>",
-        "<code>&thinsp;&thinsp;\"legs\": 4,</code>",
-        "<code>&thinsp;&thinsp;\"tails\": 1,</code>,",
-        "<code>&thinsp;&thinsp;\"friends\": [\"everything!\"]</code>",
+        "<code>&nbsp;&nbsp;\"name\": \"Camper\",</code>",
+        "<code>&nbsp;&nbsp;\"legs\": 4,</code>",
+        "<code>&nbsp;&nbsp;\"tails\": 1,</code>,",
+        "<code>&nbsp;&nbsp;\"friends\": [\"everything!\"]</code>",
         "<code>};</code>",
         "Since he's a particularly happy dog, let's change his name to \"Happy Camper\". Here's how we update his object's name property:",
         "<code>ourDog.name = \"Happy Camper\";</code>",
@@ -874,7 +874,7 @@
         "In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i < 5</code> is true.  We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
         "<code>var ourArray = [];</code>",
         "<code>for(var i = 0; i < 5; i++) {</code>",
-        "<code>&thinsp;&thinsp;ourArray.push(i);</code>",
+        "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
         "<code>}</code>",
         "<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
         "Let's try getting a <code>for</code> loop to work by pushing values to an array."
@@ -912,7 +912,7 @@
         "We'll start at <code>i = 0</code> and loop while <code>i < 10</code>.  We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.",
         "<code>var ourArray = [];</code>",
         "<code>for(var i = 0; i < 10; i += 2) {</code>",
-        "<code>&thinsp;&thinsp;ourArray.push(i);</code>",
+        "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
         "<code>}</code>",
         "<code>ourArray</code> will now contain [0,2,4,6,8] ",
         "Let's change our <code>initialization</code> and <code>final-expression</code> so we can count by odd numbers.",
@@ -952,7 +952,7 @@
         "We'll start at <code>i = 10</code> and loop while <code>i > 0</code>.  We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
         "<code>var ourArray = [];</code>",
         "<code>for(var i = 10; i > 0; i -= 2) {</code>",
-        "<code>&thinsp;&thinsp;ourArray.push(i);</code>",
+        "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
         "<code>}</code>",
         "<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>",
         "Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos for numbers.",
@@ -992,8 +992,8 @@
         "<code>var ourArray = [];</code>",
         "<code>var i = 0;</code>",
         "<code>while(i < 5) {</code>",
-        "<code>&thinsp;&thinsp;ourArray.push(i);</code>",
-        "<code>&thinsp;&thinsp;i++;</code>",
+        "<code>&nbsp;&nbsp;ourArray.push(i);</code>",
+        "<code>&nbsp;&nbsp;i++;</code>",
         "<code>}</code>",
         "Let's try getting a while loop to work by pushing values to an array.",
         "Push the numbers 0 through 4 to <code>myArray</code> using a <code>while loop</code>."
@@ -1140,9 +1140,9 @@
         "<code>if</code> statements require some sort of boolean condition to evaluate.",
         "For example:",
         "<code>if (1 === 2) {</code>",
-        "<code>&thinsp;&thinsp;return true;</code>",
+        "<code>&nbsp;&nbsp;return true;</code>",
         "<code>} else {</code>",
-        "<code>&thinsp;&thinsp;return false;</code>",
+        "<code>&nbsp;&nbsp;return false;</code>",
         "<code>}</code>",
         "Let's use <code>if</code> and <code>else</code> statements to make a coin-flip game.",
         "Create <code>if</code> and <code>else</code> statements to return the string <code>\"heads\"</code> if the flip variable is zero, or else return the string <code>\"tails\"</code> if the flip variable is not zero."
@@ -1460,7 +1460,7 @@
         "If all three numbers match, we should return the number that we have in three of slots or leave it as <code>null</code>.",
         "Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.",
         "<code>if(slotOne !== slotTwo || slotTwo !== slotThree){</code>",
-        "<code>&thinsp;&thinsp;return null;</code>",
+        "<code>&nbsp;&nbsp;return null;</code>",
         "<code>}</code>"
       ],
       "tests": [

diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json
@@ -381,7 +381,7 @@
          "<code>&#60;/style&#62;</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>&#60;style&#62;</code>",
-        "&thinsp;&thinsp;<code>h2 {color: red;}</code>",
+        "&nbsp;&nbsp;<code>h2 {color: red;}</code>",
         "<code>&#60;/style&#62;</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.",
         "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."
@@ -436,9 +436,9 @@
         "Classes are reusable styles that can be added to HTML elements.",
         "Here's an example CSS class declaration:",
         "<code>&#60;style&#62;</code>",
-        "<code>&thinsp;&thinsp;.blue-text {</code>",
-        "<code>&thinsp;&thinsp;&thinsp;&thinsp;color: blue;</code>",
-        "<code>&thinsp;&thinsp;}</code>",
+        "<code>&nbsp;&nbsp;.blue-text {</code>",
+        "<code>&nbsp;&nbsp;&nbsp;&nbsp;color: blue;</code>",
+        "<code>&nbsp;&nbsp;}</code>",
         "<code>&#60;/style&#62;</code>",
         "You can see that we've created a CSS class called <code>blue-text</code> within the <code>&#60;style&#62;</code> tag.",
         "You can apply a class to an HTML element like this:",
@@ -504,7 +504,7 @@
         "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 class selectors require a period at the beginning like this:",
         "<code>.blue-text {</code>",
-        "<code>&thinsp;&thinsp;color: blue;</code>",
+        "<code>&nbsp;&nbsp;color: blue;</code>",
         "<code>}</code>",
         "But also remember that class declarations don't use a period, like this:",
         "<code>&#60;h2 class=\"blue-text\"&#62;CatPhotoApp&#60;h2&#62;</code>",
@@ -556,7 +556,7 @@
       "description": [
         "Font size is controlled by the <code>font-size</code> CSS property, like this:",
          "<code>h1 {</code>",
-        "<code>&thinsp;&thinsp;font-size: 30px;</code>",
+        "<code>&nbsp;&nbsp;font-size: 30px;</code>",
         "}</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>&#60;style&#62;</code> tag that we created for your <code>red-text</code> class.",
         "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>",
@@ -611,7 +611,7 @@
         "You can set an element's font by using the <code>font-family</code> property.",
         "For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS:",
         "<code>h2 {</code>",
-        "<code>&thinsp;&thinsp;font-family: Sans-serif;</code>",
+        "<code>&nbsp;&nbsp;font-family: Sans-serif;</code>",
         "<code>}</code>",
         "Make all of your <code>p</code> elements use the <code>Monospace</code> font."
       ],
@@ -715,7 +715,7 @@
         "When one font isn't available, you can tell the browser to \"degrade\" to another font.",
         "For example, if you wanted an element to use the <code>Helvetica</code> font, but also degrade to the <code>Sans-Serif</code> font when <code>Helvetica</code> wasn't available, you could use this CSS style:",
         "<code>p {</code>",
-        "<code>&thinsp;&thinsp;font-family: Helvetica, Sans-Serif;</code>",
+        "<code>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;</code>",
         "<code>}</code>",
         "Now comment out your call to Google Fonts, so that the <code>Lobster</code> font isn't available. Notice how it degrades to the <code>Monospace</code> font."
       ],
@@ -832,9 +832,9 @@
         "CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
         "For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
         "<code>&#60;style&#62;</code>",
-        "<code>&thinsp;&thinsp;.larger-image {</code>",
-        "<code>&thinsp;&thinsp;&thinsp;&thinsp;width: 500px;</code>",
-        "<code>&thinsp;&thinsp;}</code>",
+        "<code>&nbsp;&nbsp;.larger-image {</code>",
+        "<code>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;</code>",
+        "<code>&nbsp;&nbsp;}</code>",
         "<code>&#60;/style&#62;</code>",
         "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
       ],
@@ -892,11 +892,11 @@
         "CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
         "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;</code>",
-        "<code>&thinsp;&thinsp;.thin-red-border {</code>",
-        "<code>&thinsp;&thinsp;&thinsp;&thinsp;border-color: red;</code>",
-        "<code>&thinsp;&thinsp;&thinsp;&thinsp;border-width: 5px;</code>",
-        "<code>&thinsp;&thinsp;&thinsp;&thinsp;border-style: solid;</code>",
-        "<code>&thinsp;&thinsp;}</code>",
+        "<code>&nbsp;&nbsp;.thin-red-border {</code>",
+        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
+        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
+        "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
+        "<code>&nbsp;&nbsp;}</code>",
         "<code>&#60;/style&#62;</code>",
         "Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
         "Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
@@ -1453,8 +1453,8 @@
         "Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
         "For example: ",
         "<code>&#60;ul&#62;</code>",
-        "&thinsp;&thinsp;<code>&#60;li&#62;milk&#60;/li&#62;</code>",
-        "&thinsp;&thinsp;<code>&#60;li&#62;cheese&#60;/li&#62;</code>",
+        "&nbsp;&nbsp;<code>&#60;li&#62;milk&#60;/li&#62;</code>",
+        "&nbsp;&nbsp;<code>&#60;li&#62;cheese&#60;/li&#62;</code>",
         "<code>&#60;/ul&#62;</code>",
         "would create a bullet point-style list of \"milk\" and \"cheese\".",
         "Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
@@ -1530,8 +1530,8 @@
         "Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
         "For example:",
         "<code>&#60;ol&#62;</code>",
-        "&thinsp;&thinsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
-        "&thinsp;&thinsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
+        "&nbsp;&nbsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
+        "&nbsp;&nbsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
         "<code>&#60;/ol&#62;</code>",
         "would create a numbered list of \"Garfield\" and \"Sylvester\".",
         "Create an ordered list of the top 3 things cats hate the most."
@@ -2386,7 +2386,7 @@
         "You can set an element's background color with the <code>background-color</code> property.",
         "For example, if you wanted an element's background color to be <code>green</code>, you'd put this within your <code>style</code> element:",
         "<code>.green-background {</code>",
-        "<code>&thinsp;&thinsp;background-color: green;</code>",
+        "<code>&nbsp;&nbsp;background-color: green;</code>",
         "<code>}</code>",
         "Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
       ],
@@ -2566,7 +2566,7 @@
         "One cool thing about <code>id</code> attributes is that, like classes, you can style them using CSS.",
         "Here's an example of how you can take your element with the <code>id</code> attribute of <code>cat-photo-element</code> and give it the background color of green. In your <code>style</code> element:",
         "<code>#cat-photo-element {</code>",
-        "<code>&thinsp;&thinsp;background-color: green;</code>",
+        "<code>&nbsp;&nbsp;background-color: green;</code>",
         "<code>}</code>",
         "Note that inside your <code>style</code> element, you always reference classes by putting a <code>.</code> in front of their names. You always reference ids by putting a <code>#</code> in front of their names.",
         "Try giving your form, which now has the <code>id</code> attribute of <code>cat-photo-form</code>, a green background."
@@ -3153,7 +3153,7 @@
         "We can prove that the <code>body</code> element exists here by giving it a <code>background-color</code> of black.",
         "We can do this by adding the following to our <code>style</code> element:",
         "<code>body {</code>",
-        "<code>&thinsp;&thinsp;background-color: black;</code>",
+        "<code>&nbsp;&nbsp;background-color: black;</code>",
         "<code>}</code>"
       ],
       "tests": [
@@ -3316,7 +3316,7 @@
         "Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
         "Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like:",
         "<code>#brown-text {</code>",
-        "<code>&thinsp;&thinsp;color: brown;</code>",
+        "<code>&nbsp;&nbsp;color: brown;</code>",
         "<code>}</code>"
       ],
       "tests": [