diff --git a/seed/challenges/01-front-end-development-certification/basic-javascript.json b/seed/challenges/01-front-end-development-certification/basic-javascript.json index b256190dc5..d69d004093 100644 --- a/seed/challenges/01-front-end-development-certification/basic-javascript.json +++ b/seed/challenges/01-front-end-development-certification/basic-javascript.json @@ -104,8 +104,7 @@ "myVariable = 5;", "Assigns the Number value 5 to myVariable.", "Assignment always goes from right to left. Everything to the right of the = operator is resolved before the value is assigned to the variable to the left of the operator.", - "myVar = 5;", - "myNum = myVar;", + "
myVar = 5;
myNum = myVar;
", "Assigns 5 to myVar and then resolves myVar to 5 again and assigns it to myNum.", "

Instructions

", "Assign the value 7 to variable a.", @@ -1487,9 +1486,7 @@ "description": [ "An easy way to append data to the end of an array is via the push() function.", ".push() takes one or more parameter and \"pushes\" it onto the end of the array.", - "var arr = [1,2,3];", - "arr.push(4);", - "// arr is now [1,2,3,4]", + "
var arr = [1,2,3];
arr.push(4);
// arr is now [1,2,3,4]
", "

Instructions

", "Push [\"dog\", 3] onto the end of the myArray variable." ], diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index f4a4c537c0..0c6719dc8f 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -315,12 +315,9 @@ "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 CSS, which stands for Cascading Style Sheets.", "At the top of your code, create a style element like this:", - "<style>", - "</style>", + "
<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>", + "
<style>
  h2 {color: red;}
</style>
", "Note that it's important to have both 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.", "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue." ], @@ -368,11 +365,7 @@ "description": [ "Classes are reusable styles that can be added to HTML elements.", "Here's an example CSS class declaration:", - "<style>", - "  .blue-text {", - "    color: blue;", - "  }", - "</style>", + "
<style>
  .blue-text {
    color: blue;
  }
</style>
", "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>", @@ -433,9 +426,7 @@ "description": [ "Remember that you can attach classes to HTML elements by using class=\"your-class-here\" within the relevant element's opening tag.", "Remember that CSS class selectors require a period at the beginning like this:", - ".blue-text {", - "  color: blue;", - "}", + "
.blue-text {
  color: blue;
}
", "But also remember that class declarations don't use a period, like this:", "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Apply the red-text class to your h2 and p elements." @@ -482,9 +473,7 @@ "id": "bad87fee1348bd9aedf08806", "description": [ "Font size is controlled by the font-size CSS property, like this:", - "h1 {", - "  font-size: 30px;", - "}", + "
h1 {
  font-size: 30px;
}
", "Create a second p 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.", "Inside the same <style> tag that we created for your red-text class, set the font-size of all p elements to 16 pixels (16px)." ], @@ -530,9 +519,7 @@ "description": [ "You can set an element's font by using the font-family property.", "For example, if you wanted to set your h2 element's font to Sans-serif, you would use the following CSS:", - "h2 {", - "  font-family: Sans-serif;", - "}", + "
h2 {
  font-family: Sans-serif;
}
", "Make all of your p elements use the Monospace font." ], "challengeSeed": [ @@ -632,9 +619,7 @@ "There are several default fonts that are available in all browsers. These include Monospace, Serif and Sans-Serif", "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 Helvetica font, but also degrade to the Sans-Serif font when Helvetica wasn't available, you could use this CSS style:", - "p {", - "  font-family: Helvetica, Sans-Serif;", - "}", + "
p {
  font-family: Helvetica, Sans-Serif;
}
", "Now comment out your call to Google Fonts, so that the Lobster font isn't available. Notice how it degrades to the Monospace font." ], "challengeSeed": [ @@ -748,11 +733,7 @@ "description": [ "CSS has a property called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", "For example, if we wanted to create a CSS class called larger-image that gave HTML elements a width of 500 pixels, we'd use:", - "<style>", - "  .larger-image {", - "    width: 500px;", - "  }", - "</style>", + "
<style>
  .larger-image {
    width: 500px;
  }
</style>
", "Create a class called smaller-image and use it to resize the image so that it's only 100 pixels wide." ], "challengeSeed": [ @@ -809,13 +790,7 @@ "description": [ "CSS borders have properties 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:", - "<style>", - "  .thin-red-border {", - "    border-color: red;", - "    border-width: 5px;", - "    border-style: solid;", - "  }", - "</style>", + "
<style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
</style>
", "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.", "Remember that you can apply multiple classes to an element by separating each class with a space within its class attribute. For example:", "<img class=\"class1 class2\">" @@ -1366,10 +1341,7 @@ "HTML has a special element for creating unordered lists, or bullet point-style lists.", "Unordered lists start with a <ul> element. Then they contain some number of <li> elements.", "For example: ", - "<ul>", - "  <li>milk</li>", - "  <li>cheese</li>", - "</ul>", + "
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
", "would create a bullet point-style list of \"milk\" and \"cheese\".", "Remove the last two p elements and create an unordered list of three things that cats love at the bottom of the page." ], @@ -1445,10 +1417,7 @@ "HTML has a special element for creating ordered lists, or numbered-style lists.", "Ordered lists start with a <ol> element. Then they contain some number of <li> elements.", "For example:", - "<ol>", - "  <li>Garfield</li>", - "  <li>Sylvester</li>", - "</ol>", + "
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>
", "would create a numbered list of \"Garfield\" and \"Sylvester\".", "Create an ordered list of the top 3 things cats hate the most." ], @@ -2287,9 +2256,7 @@ "description": [ "You can set an element's background color with the background-color property.", "For example, if you wanted an element's background color to be green, you'd put this within your style element:", - ".green-background {", - "  background-color: green;", - "}", + "
.green-background {
  background-color: green;
}
", "Create a class called gray-background with the background-color of gray. Assign this class to your div element." ], "challengeSeed": [ @@ -2461,9 +2428,7 @@ "description": [ "One cool thing about id attributes is that, like classes, you can style them using CSS.", "Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element:", - "#cat-photo-element {", - "  background-color: green;", - "}", + "
#cat-photo-element {
  background-color: green;
}
", "Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.", "Try giving your form, which now has the id attribute of cat-photo-form, a green background." ], @@ -3028,9 +2993,7 @@ "Every HTML page has a body element.", "We can prove that the body element exists here by giving it a background-color of black.", "We can do this by adding the following to our style element:", - "body {", - "  background-color: black;", - "}" + "
body {
  background-color: black;
}
" ], "challengeSeed": [ "