diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json index 4945ff1470..5e3f435fd8 100644 --- a/challenges/html5-and-css.json +++ b/challenges/html5-and-css.json @@ -372,7 +372,7 @@ "difficulty": 1.09, "description": [ "Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue.", - "With CSS, there are hundreds of CSS attributes that you can use to change the way an element looks on your page.", + "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.", "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>.", @@ -544,7 +544,7 @@ "description": [ "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.", "Then, inside your <style> element, set the font-size of all p elements to 16 pixels.", - "Font size is controlled by the font-size CSS attribute, like this: h1 { font-size: 30px; }.", + "Font size is controlled by the font-size CSS property, like this: h1 { font-size: 30px; }.", "See if you can figure out how to give both of your p elements the font-size of 16 pixels (16px). You can do this inside the same <style> tag that we created for your red-text class." ], "tests": [ @@ -595,7 +595,7 @@ "difficulty": 1.14, "description": [ "Make all of your p elements use the Monospace font.", - "You can set an element's font by using the font-family attribute.", + "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; }." ], "tests": [ @@ -645,7 +645,7 @@ "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:", "<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">.", - "Now you can set Lobster as a font-family attribute on your h2 element." + "Now you can set Lobster as a font-family value on your h2 element." ], "tests": [ "assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the Lobster font.')", @@ -808,7 +808,7 @@ "title": "Size your Images", "difficulty": 1.18, "description": [ - "CSS has an attribute called width that controls an element's width. Just like with fonts, we'll use px (pixels) to specify the image's width.", + "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>.", "Create a class called smaller-image 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", "difficulty": 1.19, "description": [ - "CSS borders have attributes like style, color and width.", + "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>.", "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." ], @@ -927,8 +927,8 @@ "title": "Add Rounded Corners with a Border Radius", "difficulty": 1.20, "description": [ - "Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called border-radius.", - "You can specify a border-radius with pixels. This will affect how rounded the corners are. Add this attribute to your thick-green-border class and set it to 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": [ @@ -2355,7 +2355,7 @@ "title": "Give a Background Color to a Div Element", "difficulty": 1.39, "description": [ - "You can set an element's background color with the background-color attribute.", + "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 use .green-background { background-color: green; } within your style element.", "Create a class called gray-background with the background-color of gray. Assign this class to your div element." ], @@ -2627,7 +2627,7 @@ "difficulty": 1.40, "description": [ "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: padding, margin, and border.", + "Three important properties control the space that surrounds each HTML element: padding, margin, and border.", "An element's padding controls the amount of space between the element and its border.", "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 padding than the green box.", "When you increase the green box's padding, it will increase the distance between the text padding and the border around it.", @@ -2839,7 +2839,7 @@ "difficulty": 1.43, "description": [ "Sometimes you will want to customize an element so that it has different padding on each of its sides.", - "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes.", + "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left properties.", "Give the green box a padding of 40px on its top and left side, but only 20px on its bottom and right side." ], "tests": [ @@ -2912,7 +2912,7 @@ "description": [ "Give the green box a margin of 40px on its top and left side, but only 20px on its bottom and right side.", "Sometimes you will want to customize an element so that it has a different margin on each of its sides.", - "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes." + "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties." ], "tests": [ "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your green-box class should give the top of elements 40px of margin.')", @@ -2981,7 +2981,7 @@ "title": "Use Clockwise Notation to Specify the Padding of an Element", "difficulty": 1.44, "description": [ - "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.", + "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.", "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 padding of 40px on its top and left side, but only 20px on its bottom and right side." ], @@ -3051,7 +3051,7 @@ "difficulty": 1.45, "description": [ "Let's try this again, but with margin this time.", - "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left attributes, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;.", + "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;.", "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 Clockwise Notation to give an element a margin of 40px on its top and left side, but only 20px on its bottom and right side." ], @@ -3163,8 +3163,8 @@ "assert(($(\"h1\").length > 0), 'Create an h1 element.')", "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your h1 element should have the text Hello World.')", "assert(editor.match(/<\\/h1>/g) && editor.match(/

/g).length === editor.match(/

h1 element has a closing tag.')", - "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body element the color attribute of green.')", - "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body element the font-family attribute of Monospace.')", + "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body element the color property of green.')", + "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body element the font-family property of Monospace.')", "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your h1 element should inherit the font Monospace from your body element.')", "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your h1 element should inherit the color green from your body element.')" ], @@ -3198,7 +3198,7 @@ "description": [ "Sometimes your HTML elements will receive multiple styles that conflict with one another.", "For example, your h1 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 override the body element's color: green; 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 override the body element's color: green; CSS property?", "Create a CSS class called pink-text that gives an element the color pink.", "Give your h1 element the class of pink-text." ], diff --git a/challenges/jquery.json b/challenges/jquery.json index 3b1413f1a9..0402f722a2 100644 --- a/challenges/jquery.json +++ b/challenges/jquery.json @@ -364,7 +364,7 @@ "Select target1 and change its color to red.", "jQuery has a function called .css() that allows you to change the CSS of an element.", "Here's how we would change its color to blue: $(\"#target1\").css(\"color\", \"blue\");", - "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": [ "assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your target1 element should have red text.')",