greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Revert "Feature/Popover Definitions"

pull/18182/head
Berkeley Martinez 2016-07-16 21:35:28 -07:00 committed by GitHub
parent 8eed611d7e
commit 25e9a5b7d7
3 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
challenges/01-front-end-development-certification/bootstrap.json
View File

@ -8,7 +8,7 @@
"id": "bad87fee1348bd9acde08712",
"title": "Use Responsive Design with Bootstrap Fluid Containers",
"description": [
"In the HTML5 and CSS section of FreeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS <a tabindex=\"0\" class=\"pop-explain def-framework\"><code>framework</code></a>.",
"In the HTML5 and CSS section of FreeCodeCamp we built a Cat Photo App. Now let's go back to it. 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 <code>Responsive Design</code>.",
"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 by adding the following code to the top of your HTML:",
@ -1149,7 +1149,7 @@
"id": "bad87fee1348bd9aedd08845",
"title": "Add Font Awesome Icons to our Buttons",
"description": [
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <a tabindex=\"0\" class=\"pop-explain def-svg\"><code>.svg</code></a> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"Font Awesome is a convenient library of icons. These icons are vector graphics, stored in the <code>.svg</code> file format. These icons are treated just like fonts. You can specify their size using pixels, and they will assume the font size of their parent HTML elements.",
"You can add Font Awesome to any app just by including it by adding the following code to the top of your HTML:",
"<code>&#60;link rel=\"stylesheet\" href=\"//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css\"/&#62;</code>",
"In this case, we've already added it for you to this page behind the scenes.",

27
challenges/01-front-end-development-certification/html5-and-css.json
View File

@ -61,9 +61,8 @@
"title": "Say Hello to HTML Elements",
"description": [
"Welcome to Free Code Camp's first coding challenge.",
"If you see a term or phrase with a green background, click or tab onto it to see a definition",
"You can edit <a tabindex=\"0\" class=\"pop-explain def-code\"><code>code</code></a> in your <a tabindex=\"0\" class=\"pop-explain def-text-editor\"><code>text editor</code></a>, which we've embedded into this web page.",
"Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <a tabindex=\"0\" class=\"pop-explain def-element\"><code>element</code></a>.",
"You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
"Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
"Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.",
"Opening tags look like this:",
"<code>&#60;h1&#62;</code>",
@ -133,10 +132,10 @@
],
"title": "Headline with the h2 Element",
"description": [
"Over the next few challenges, we'll build an <a tabindex=\"0\" class=\"pop-explain def-html5\"><code>HTML5</code></a> app that will look something like this:",
"Over the next few challenges, we'll build an HTML5 app that will look something like this:",
"<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
"The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
"This element tells the <a tabindex=\"0\" class=\"pop-explain def-browser\"><code>browser</code></a> about the structure of your website. <code>h1</code> elements are often used for main <a tabindex=\"0\" class=\"pop-explain def-heading\"><code>headings</code></a>, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different and new sections.",
"This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different and new sections.",
"Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
],
"challengeSeed": [
@ -565,14 +564,14 @@
],
"title": "Use CSS Selectors to Style Elements",
"description": [
"With <a tabindex=\"0\" class=\"pop-explain def-css\"><code>CSS</code></a>, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
"With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
"When you entered <code>&#60;h2 style=\"color: red\"&#62;CatPhotoApp&#60;/h2&#62;</code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
"At the top of your code, create a <code>style</code> element like this:",
"<blockquote>&#60;style&#62;<br>&#60;/style&#62;</blockquote>",
"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:",
"<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;h2 {color: red;}<br>&#60;/style&#62;</blockquote>",
"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 (<code>;</code>) to the end of each of your element's styles.",
"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."
],
"challengeSeed": [
@ -790,8 +789,8 @@
"description": [
"Font size is controlled by the <code>font-size</code> CSS property, like this:",
"<blockquote>h1 {<br>&nbsp;&nbsp;font-size: 30px;<br>}</blockquote>",
"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>",
"Inside the same <code>&#60;style&#62;</code> tag that contains your <code>red-text</code> class, create an entry for <code>p</code> elements and set the <code>font-size</code> to 16 <a tabindex=\"0\" class=\"pop-explain def-pixel\"><code>pixels</code></a> (<code>16px</code>).",
"Create a second <code>p</code> element after the existing <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>",
"Inside the same <code>&#60;style&#62;</code> tag that contains your <code>red-text</code> class, create an entry for <code>p</code> elements and set the <code>font-size</code> to 16 pixels (<code>16px</code>).",
"<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge.",
"Also, please do not add a class attribute to your new <code>p</code> element."
],
@ -918,7 +917,7 @@
"title": "Import a Google Font",
"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 <a tabindex=\"0\" class=\"pop-explain def-call\"><code>call</code></a> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
"Copy the following code snippet and paste it into the top of your code editor:",
"<code>&#60;link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>",
"Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element.",
@ -1064,7 +1063,7 @@
],
"title": "Add Images to your Website",
"description": [
"You can add images to your website by using the <code>img</code> element, and point to a specific image's <a tabindex=\"0\" class=\"pop-explain def-url\"><code>URL</code></a> using the <code>src</code> attribute.",
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
"An example of this would be:",
"<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
"Note that in most cases, <code>img</code> elements are self-closing.",
@ -1628,7 +1627,7 @@
"title": "Make Dead Links using the Hash Symbol",
"description": [
"Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
"This is also handy when you're changing the behavior of a link using <a tabindex=\"0\" class=\"pop-explain def-jquery\"><code>jQuery</code></a>, which we'll learn about later.",
"This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
"Replace the value of your <code>a</code> element's <code>href</code> attribute with a <code>#</code>, also known as a hash symbol, to turn it into a dead link."
],
"challengeSeed": [
@ -2270,7 +2269,7 @@
],
"title": "Create a Form Element",
"description": [
"You can build web forms that actually submit data to a <a tabindex=\"0\" class=\"pop-explain def-server\"><code>server</code></a> using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
"You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
"For example:",
"<code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>",
"Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
@ -4716,4 +4715,4 @@
]
}
]
}
}

4
challenges/01-front-end-development-certification/jquery.json
View File

@ -14,7 +14,7 @@
"Your browser will run any JavaScript inside a <code>script</code> element, including jQuery.",
"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>",
"We'll learn more about <code>functions</code> later. The important thing to know is that code you put inside this <code>function</code> will run as soon as your browser has loaded your page.",
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause <a tabindex=\"0\" class=\"pop-explain def-bug\"><code>bugs</code></a>."
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs."
],
"challengeSeed": [
"",
@ -915,7 +915,7 @@
"jQuery has a function called <code>clone()</code> that makes a copy of an element.",
"For example, if we wanted to copy <code>target2</code> from our <code>left-well</code> to our <code>right-well</code>, we would use:",
"<code>$(\"#target2\").clone().appendTo(\"#right-well\");</code>",
"Did you notice this involves sticking two jQuery functions together? This is called <a tabindex=\"0\" class=\"pop-explain def-chaining\"><code>method chaining</code></a> and it's a convenient way to get things done with jQuery.",
"Did you notice this involves sticking two jQuery functions together? This is called <code>function chaining</code> and it's a convenient way to get things done with jQuery.",
"Clone your <code>target5</code> element and append it to your <code>left-well</code>."
],
"challengeSeed": [