diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json
index 21e98f741a..9f1255fa39 100644
--- a/challenges/01-responsive-web-design/basic-css.json
+++ b/challenges/01-responsive-web-design/basic-css.json
@@ -3629,6 +3629,1609 @@
]
}
}
+ },
+ {
+ "id": "5a9d725e424fe3d0e10cad10",
+ "title": "Quickly change many styles with CSS Variables",
+ "description": [
+ "CSS Variables are a powerful way to change many CSS style properties at once by only having to change one value. This can dramatically simplify updating and changing the styles on your web page. Do the challenge below to see how changing three values can change the styling of many elements.",
+ "
",
+ "In the penguin class, change the black value to gray, the gray value to white, and the yellow value to orange."
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
penguin class should declar the --penguin-skin variable and assign it to gray.');",
+ "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'message: penguin class should declar the --penguin-skin variable and assign it to white.');",
+ "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), 'message: penguin class should declar the --penguin-skin variable and assign it to orange.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "releasedOn": "Mar 15, 2018",
+ "challengeType": 0,
+ "translations": {}
+ },
+ {
+ "id": "5a9d726c424fe3d0e10cad11",
+ "title": "Create a custom CSS Variable",
+ "description": [
+ "To create a CSS Variable, you just need to give it a name with two dashes in front of it and assign it a value like this:",
+ "--penguin-skin: gray;
",
+ "This will create a variable named --penguin-skin and assign it the value of gray.",
+ "Now you can use that variable elsewhere in your CSS to change the value of anything that accepts a color to gray.",
+ "
",
+ "In the penguin class, create a variable name --penguin-skin and give it a value of gray"
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
penguin class should declar the --penguin-skin variable and assign it to gray.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "releasedOn": "Mar 15, 2018",
+ "challengeType": 0,
+ "translations": {}
+ },
+ {
+ "id": "5a9d727a424fe3d0e10cad12",
+ "title": "Use a custom CSS Variable",
+ "description": [
+ "After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.",
+ "background: var(--penguin-skin);
",
+ "This will change the background of whatever element you are targeting to gray because that is the value of the --penguin-skin variable.",
+ "Note
Styles will not be applied unless the variable names are an exact match.",
+ "
",
+ "Apply the --penguin-skin variable to the background property of the penguin-top, penguin-bottom, right-hand and left-hand classes."
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
--penguin-skin variable should be applied to the background property of the pengiun-top class.');",
+ "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'message: --penguin-skin variable should be applied to the background property of the pengiun-bottom class.');",
+ "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'message: --penguin-skin variable should be applied to the background property of the right-hand class.');",
+ "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: --penguin-skin variable should be applied to the background property of the left-hand class.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "releasedOn": "Mar 15, 2018",
+ "challengeType": 0,
+ "translations": {}
+ },
+ {
+ "id": "5a9d7286424fe3d0e10cad13",
+ "title": "Attach a Fallback value to a CSS Variable",
+ "description": [
+ "When using your variable as a CSS property value, you can attach a fallback value that your page will revert to if for some reason it can't get your variable to work.
It could be that someone is using an older browser that hasn't yet adopted CSS Variables, or perhaps their device doesn't support the value you gave the variable. Here's how you do it:",
+ "background: var(--penguin-skin, black);
",
+ "This will set background to black if there is a problem with your variable.",
+ "Note
This can be very useful for debugging.",
+ "
",
+ "Add a fallback value of black to the background property of penguin-top and penguin-bottom classes. This style will be applied because of a typo in the variable name."
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
black should be applied to the background property of the penguin-top class.');",
+ "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'message: The fallback value of black should be applied to the background property of the penguin-bottom class.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "releasedOn": "Mar 15, 2018",
+ "challengeType": 0,
+ "translations": {}
+ },
+ {
+ "id": "5a9d7295424fe3d0e10cad14",
+ "title": "Cascading CSS variables",
+ "description": [
+ "When you create your variable, it is available for use in the element you create it and all the elements nested within it.
This effect is known as cascading. Because of this, CSS Variables are often defined in the :root element.
You can think of the :root element as a container for your entire HTML document in the same way that an html tag is a container for the body tag.
By creating your variables in :root, they will be available throughout the whole web page.",
+ "
",
+ "Define a variable named --penguin-belly in the :root selector and give it the value of pink. You can then see how the value will cascade down to change the value to pink, anywhere that variable is used."
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
:root should declare the --penguin-belly variable and assign it to pink.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "releasedOn": "Mar 15, 2018",
+ "challengeType": 0,
+ "translations": {}
+ },
+ {
+ "id": "5a9d72a1424fe3d0e10cad15",
+ "title": "Change a variable for a specific area",
+ "description": [
+ "When you create your variables in :root it will set the value of that variable for the whole page. Unless at some point you change the value of that variable.",
+ "
",
+ "Change the value of --penguin-belly to white in the penguin class."
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
penguin class should reassign the --penguin-belly variable to white.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "releasedOn": "Mar 15, 2018",
+ "challengeType": 0,
+ "translations": {}
+ },
+ {
+ "id": "5a9d72ad424fe3d0e10cad16",
+ "title": "Use a media query to change a variable",
+ "description": [
+ "CSS Variables can simplify the way you use media queries. For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable and it will apply its style where its used.",
+ "
",
+ "In the :root selector of the media query, change it so --penguin-size is redefined and given a value of 200px. Also, redefine --penguin-skin and give it a value of black. Then resize the preview to see the change."
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
:root should reassign the --penguin-size variable to 200px.');",
+ "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), 'message: :root should reassign the --penguin-skin variable to black.');"
+ ],
+ "solutions": [],
+ "hints": [],
+ "type": "waypoint",
+ "releasedOn": "Mar 15, 2018",
+ "challengeType": 0,
+ "translations": {}
}
]
-}
+}
\ No newline at end of file