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

Merge pull request #2699 from bugron/bugron-2106

Browse Source 
Changes CSS attributes to CSS properties
This commit is contained in:
Berkeley Martinez
2015-08-25 22:32:23 -07:00
parent 8ecf3698cb 748e460209
commit d38cd70198
2 changed files with 18 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
challenges/html5-and-css.json
View File

@ -372,7 +372,7 @@
"difficulty": 1.09, "difficulty": 1.09,
"description": [ "description": [
"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.", "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.",
"With CSS, there are hundreds of CSS <code>attributes</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>.", "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>.", "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: <code>&#60;style&#62;&#60;/style&#62;</code>.", "At the top of your code, create a <code>style</code> element like this: <code>&#60;style&#62;&#60;/style&#62;</code>.",
@ -544,7 +544,7 @@
"description": [ "description": [
"Create a second <code>p</code> element with the following <code>kitty ipsum text</code>: <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>", "Create a second <code>p</code> element with the following <code>kitty ipsum text</code>: <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>",
"Then, inside your <code>&#60;style&#62;</code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.", "Then, inside your <code>&#60;style&#62;</code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.",
"Font size is controlled by the <code>font-size</code> CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.", "Font size is controlled by the <code>font-size</code> CSS property, like this: <code>h1 { font-size: 30px; }</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." "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."
], ],
"tests": [ "tests": [
@ -595,7 +595,7 @@
"difficulty": 1.14, "difficulty": 1.14,
"description": [ "description": [
"Make all of your <code>p</code> elements use the <code>Monospace</code> font.", "Make all of your <code>p</code> elements use the <code>Monospace</code> font.",
"You can set an element's font by using the <code>font-family</code> attribute.", "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 { font-family: Sans-serif; }</code>." "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 { font-family: Sans-serif; }</code>."
], ],
"tests": [ "tests": [
@ -645,7 +645,7 @@
"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.", "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 your code editor:", "Copy the following code snippet and paste it into your code editor:",
"<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>.", "<code>&#60;link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"&#62;</code>.",
"Now you can set <code>Lobster</code> as a font-family attribute on your <code>h2</code> element." "Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element."
], ],
"tests": [ "tests": [
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')", "assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')",
@ -808,7 +808,7 @@
"title": "Size your Images", "title": "Size your Images",
"difficulty": 1.18, "difficulty": 1.18,
"description": [ "description": [
"CSS has an attribute 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.", "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; .larger-image { width: 500px; } &#60;/style&#62;</code>.", "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; .larger-image { width: 500px; } &#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." "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
], ],
@ -864,7 +864,7 @@
"title": "Add Borders Around your Elements", "title": "Add Borders Around your Elements",
"difficulty": 1.19, "difficulty": 1.19,
"description": [ "description": [
"CSS borders have attributes like <code>style</code>, <code>color</code> and <code>width</code>.", "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; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#60;/style&#62;</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; .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } &#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." "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."
], ],
@ -927,8 +927,8 @@
"title": "Add Rounded Corners with a Border Radius", "title": "Add Rounded Corners with a Border Radius",
"difficulty": 1.20, "difficulty": 1.20,
"description": [ "description": [
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.", "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to <code>10px</code>.", "You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this property to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
"Give your cat photo a <code>border-radius</code> of <code>10px</code>." "Give your cat photo a <code>border-radius</code> of <code>10px</code>."
], ],
"tests": [ "tests": [
@ -2355,7 +2355,7 @@
"title": "Give a Background Color to a Div Element", "title": "Give a Background Color to a Div Element",
"difficulty": 1.39, "difficulty": 1.39,
"description": [ "description": [
"You can set an element's background color with the <code>background-color</code> attribute.", "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 use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.", "For example, if you wanted an element's background color to be <code>green</code>, you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
"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." "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."
], ],
@ -2627,7 +2627,7 @@
"difficulty": 1.40, "difficulty": 1.40,
"description": [ "description": [
"You may have already noticed this, but all HTML elements are essentially little rectangles.", "You may have already noticed this, but all HTML elements are essentially little rectangles.",
"Three important attributes control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.", "Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.", "An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.", "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
"When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.", "When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
@ -2839,7 +2839,7 @@
"difficulty": 1.43, "difficulty": 1.43,
"description": [ "description": [
"Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.", "Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes.", "CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
"Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side." "Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
], ],
"tests": [ "tests": [
@ -2912,7 +2912,7 @@
"description": [ "description": [
"Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.", "Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.",
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.", "Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes." "CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties."
], ],
"tests": [ "tests": [
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')", "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
@ -2981,7 +2981,7 @@
"title": "Use Clockwise Notation to Specify the Padding of an Element", "title": "Use Clockwise Notation to Specify the Padding of an Element",
"difficulty": 1.44, "difficulty": 1.44,
"description": [ "description": [
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.", "Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.", "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
"Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side." "Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
], ],
@ -3051,7 +3051,7 @@
"difficulty": 1.45, "difficulty": 1.45,
"description": [ "description": [
"Let's try this again, but with <code>margin</code> this time.", "Let's try this again, but with <code>margin</code> this time.",
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.", "Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.", "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
"Use <code>Clockwise Notation</code> to give an element a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side." "Use <code>Clockwise Notation</code> to give an element a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
], ],
@ -3163,8 +3163,8 @@
"assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')", "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')", "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')",
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')", "assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> attribute of <code>green</code>.')", "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.')",
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> attribute of <code>Monospace</code>.')", "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')", "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>Monospace</code> from your <code>body</code> element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')" "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.')"
], ],
@ -3198,7 +3198,7 @@
"description": [ "description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.", "Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your <code>h1</code> element can't be both green and pink at the same time.", "For example, your <code>h1</code> element can't be both green and pink at the same time.",
"Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS attribute?", "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS property?",
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.", "Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
"Give your <code>h1</code> element the class of <code>pink-text</code>." "Give your <code>h1</code> element the class of <code>pink-text</code>."
], ],

2
challenges/jquery.json
View File

@ -364,7 +364,7 @@
"Select <code>target1</code> and change its color to red.", "Select <code>target1</code> and change its color to red.",
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.", "jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
"Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>", "Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>",
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon." "This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon."
], ],
"tests": [ "tests": [
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')", "assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')",