diff --git a/seed/challenges/bootstrap.json b/seed/challenges/bootstrap.json index 886bb06b92..e921750ae7 100644 --- a/seed/challenges/bootstrap.json +++ b/seed/challenges/bootstrap.json @@ -10,7 +10,9 @@ "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework.", "Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design.", "With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.", - "You can add Bootstrap to any app just by including it with <link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/> at the top of your HTML. But we've added it for you to this page behind the scenes.", + "You can add Bootstrap to any app just by including it by adding the following code to the top of your HTML:", + "<link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\"/>", + "In this case, we've already added it for you to this page behind the scenes.", "To get started, we should nest all of our HTML in a div element with the class container-fluid." ], "tests": [ @@ -97,8 +99,8 @@ ], "tests": [ "assert($(\"img\").length > 1, 'You should have a total of two images.')", - "assert($(\"img\").hasClass(\"img-responsive\"), 'Your new image should have the class img-responsive.')", - "assert(new RegExp(\"http://bit.ly/fcc-running-cats\", \"gi\").test($(\"img.img-responsive\").attr(\"src\")), 'Add a second image with the src of http://bit.ly/fcc-running-cats.')" + "assert($(\"img\").hasClass(\"img-responsive\"), 'Your new image should have the class img-responsive')", + "assert(new RegExp(\"http://bit.ly/fcc-running-cats\", \"gi\").test($(\"img.img-responsive\").attr(\"src\")), 'Add a second image with the src of http://bit.ly/fcc-running-cats')" ], "challengeSeed": [ "", @@ -176,7 +178,8 @@ "title": "Center Text with Bootstrap", "description": [ "Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center to our h2 element.", - "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"red-text text-center\">your text</h2>." + "Remember that you can add several classes to the same element by separating each of them with a space, like this:", + "<h2 class=\"red-text text-center\">your text</h2>" ], "tests": [ "assert($(\"h2\").hasClass(\"text-center\"), 'Your h2 element should be centered by applying the class text-center')" @@ -889,7 +892,8 @@ "\"An", "By using the span element, you can put several elements together, and even style different parts of the same element differently.", "Nest the word \"love\" in your \"Things cats love\" element below within a span element. Then give that span the class text-danger to make the text red.", - "Here's how you would do this with the \"Top 3 things cats hate\" element: <p>Top 3 things cats <span class = \"text-danger\">hate</span></p>" + "Here's how you would do this with the \"Top 3 things cats hate\" element:", + "<p>Top 3 things cats <span class = \"text-danger\">hate</span></p>" ], "tests": [ "assert($(\"p span\") && $(\"p span\").length > 0, 'Your span element should be inside your p element.')", @@ -1907,7 +1911,8 @@ "Recall that in addition to class attributes, you can give each of your elements an id attribute.", "Each id should be unique to a specific element.", "Let's give a unique id to each of our div elements of class well.", - "Remember that you can give an element an id like this: <div class=\"well\" id=\"center-well\">", + "Remember that you can give an element an id like this:", + "<div class=\"well\" id=\"center-well\">", "Give the well on the left the id of left-well. Give the well on the right the id of right-well." ], "tests": [ @@ -2003,7 +2008,7 @@ "title": "Give Each Element a Unique ID", "description": [ "We will also want to be able to use jQuery to target each button by its unique id.", - "Give each of your buttons a unique id like, starting with target1 and ending with target6." + "Give each of your buttons a unique id, starting with target1 and ending with target6." ], "tests": [ "assert($(\"#left-well\").children(\"#target1\") && $(\"#left-well\").children(\"#target1\").length > 0, 'One button element should have the id target1.')", @@ -2054,7 +2059,7 @@ "title": "Label Bootstrap Buttons", "description": [ "Just like we labeled our wells, we want to label our buttons.", - "Give each of your button elements text that corresponds to their id." + "Give each of your button elements text that corresponds to its id." ], "tests": [ "assert(new RegExp(\"#target1\",\"gi\").test($(\"#target1\").text()), 'Give your button element with the id target1 the text #target1.')", @@ -2111,7 +2116,7 @@ ], "tests": [ "assert(editor.match(/.*\\n+.+/g), 'Be sure to close your comment with -->.')" ], "challengeSeed": [ diff --git a/seed/challenges/html5-and-css.json b/seed/challenges/html5-and-css.json index f3e138ba0a..1ebf6e3858 100644 --- a/seed/challenges/html5-and-css.json +++ b/seed/challenges/html5-and-css.json @@ -10,7 +10,12 @@ "Welcome to Free Code Camp's first coding challenge.", "You can edit code in your text editor, which we've embedded into this web page.", "Do you see the code in your text editor that says <h1>Hello</h1>? That's an HTML element.", - "Most HTML elements have an opening tag and a closing tag. Opening tags look like this: <h1>. Closing tags look like this: </h1>. Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.", + "Most HTML elements have an opening tag and a closing tag.", + "Opening tags look like this:", + "<h1>", + "Closing tags look like this:", + "</h1>", + "Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.", "Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing, you can advance to the next challenge.", "To pass the test on this challenge, change your h1 element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button." ], @@ -405,7 +410,7 @@ "Borra el atributo style de tu elemento h2 y escribe el CSS para hacer todos los elementos h2 de color azul.", "Con CSS, hay cientos de atributos CSS que puedes usar para cambiar como un elemento se ve en una página web.", "Cuando entraste <h2 style=\"color: red\">CatPhotoApp<h2>, le estuviste dando a ese elemento h2 en particular un estilo en línea", - "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando Hojas de Estilo en Cascada (Cascading Style Sheets, CSS)", + "Esa es una forma de agregar estilo a un elemento, pero una manera mejor es usando Hojas de Estilo en Cascada (Cascading Style Sheets, CSS).", "Al principio de tu código, crea una etiqueta style como ésta: <style></style>", "Dentro de ese elemento style, puedes crear un selector css para todos los elementos h2. Por ejemplo, si querías que todos los elementos h2 sean rojos, tu elemento style se vería así: <style>h2 {color: red;}</style>", "Fíjate que es importante tener llaves de apertura y de cierre ({ y }) alrededor del estilo para cada elemento. También necesitas asegurarte que el estilo para tu elemento está entre las etiquetas style de apertura y cierre. Finalmente, asegúrate de agregar el punto y coma al final de cada uno de los estilos de tu elemento." @@ -435,7 +440,8 @@ "  }", "</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>", + "You can apply a class to an HTML element like this:", + "<h2 class=\"blue-text\">CatPhotoApp</h2>", "Note that in your CSS style 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 style element, try removing the h2 style declaration from your existing style element, then replace it with the class declaration for .red-text", "Create a CSS class called red-text and apply it to your h2 element." @@ -651,7 +657,7 @@ "description": [ "Now, let's import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).", "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:", + "Copy the following code snippet and paste it into the top of your code editor:", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">", "Now you can set Lobster as a font-family value on your h2 element.", "Apply the font-family of Lobster to your h2 element." @@ -768,7 +774,8 @@ "An example of this would be:", "<img src=\"http://www.your-image-source.com/your-image.jpg\">", "Note that in most cases, img elements are self-closing.", - "Try it with this image: https://bit.ly/fcc-relaxing-cat" + "Try it with this image:", + "https://bit.ly/fcc-relaxing-cat" ], "tests": [ "assert($(\"img\").length > 0, 'Your page should have an image element.')", @@ -951,9 +958,9 @@ "id": "bad87fee1348bd9aedf08814", "title": "Add Rounded Corners with a Border Radius", "description": [ - "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius", - "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this property to your thick-green-border class and set it to 10px", - "Give your cat photo a border-radius of 10px" + "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called border-radius.", + "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this property to your thick-green-border class and set it to 10px.", + "Give your cat photo a border-radius of 10px." ], "tests": [ "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your image element should have the class \"thick-green-border\".')", @@ -1017,7 +1024,7 @@ "title": "Make Circular Images with a Border Radius", "description": [ "In addition to pixels, you can also specify a border-radius using a percentage.", - "Give your cat photo a border-radius of 50%" + "Give your cat photo a border-radius of 50%." ], "tests": [ "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of 50%, making it perfectly circular.')", @@ -1085,11 +1092,11 @@ "\"a", "Here's an example:", "<p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p>", - "Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text" + "Create an a element that links to http://freecatphotoapp.com and has \"cat photos\" as its anchor text." ], "tests": [ - "assert((/cat photos/gi).test($(\"a\").text()), 'Your a element should have the anchor text of \"cat photos\"')", - "assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to http://freecatphotoapp.com.')", + "assert((/cat photos/gi).test($(\"a\").text()), 'Your a element should have the anchor text of \"cat photos\".')", + "assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an a element that links to http://freecatphotoapp.com')", "assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/a element has a closing tag.')" ], "challengeSeed": [ @@ -1376,7 +1383,7 @@ "Add an alt attribute with the text A cute orange cat lying on its back to our cat photo." ], "tests": [ - "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt attribute set to A cute orange cat lying on its back.')" + "assert($(\"img\").filter(function(){ return /cat/gi.test(this.alt) }).length > 0, 'Your image element should have an alt attribute set to A cute orange cat lying on its back')" ], "challengeSeed": [ "", @@ -1521,10 +1528,10 @@ "Ordered lists start with a <ol> element. Then they contain some number of <li> elements.", "For example:", "<ol>", - "  <li>hydrogen</li>", - "  <li>helium</li>", + "  <li>Garfield</li>", + "  <li>Sylvester</li>", "</ol>", - "would create a numbered list of \"hydrogen\" and \"helium\".", + "would create a numbered list of \"Garfield\" and \"Sylvester\".", "Create an ordered list of the top 3 things cats hate the most." ], "tests": [ @@ -1602,7 +1609,7 @@ "id": "bad87fee1348bd9aedf08829", "title": "Create a Text Field", "description": [ - "Now let's create a web form", + "Now let's create a web form.", "Text inputs are a convenient way to get input from your user.", "You can create one like this:", "<input type=\"text\">", @@ -1929,7 +1936,8 @@ "description": [ "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.", "For example, if you wanted to make a text input field required, you can just add the word required within your input element, you would use: <input type=\"text\" required>", - "Make your text input a required field, so that your user can't submit the form without completing this field." + "Make your text input a required field, so that your user can't submit the form without completing this field.", + "Then try to submit the form without inputing any text. See how your HTML5 form notifies you that the field is required?" ], "tests": [ "assert($(\"input\").prop(\"required\"), 'Your text input element should have the required attribute.')" @@ -2014,13 +2022,13 @@ "All related radio buttons should have the same name attribute.", "Here's an example of a radio button:", "<label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>", - "Add to your form a pair of radio buttons. Each radio button should be nested within its own label element. They should share a common name attribute. One should have the option of indoor and the other should have the option of outdoor" + "Add to your form a pair of radio buttons. Each radio button should be nested within its own label element. They should share a common name attribute. One should have the option of indoor and the other should have the option of outdoor." ], "tests": [ "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.')", "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'Give your radio buttons the name attribute of indoor-outdoor.')", "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'Each of your two radio button elements should be nested in its own label element.')", - "assert(editor.match(/<\\/label>/g) && editor.match(/