diff --git a/seed/challenges/01-responsive-web-design/basic-css.json b/seed/challenges/01-responsive-web-design/basic-css.json
index 824813f809..26b36cbebe 100644
--- a/seed/challenges/01-responsive-web-design/basic-css.json
+++ b/seed/challenges/01-responsive-web-design/basic-css.json
@@ -1170,7 +1170,7 @@
]
}
},
- "guideUrl":"https://guide.freecodecamp.org/certificates/add-borders-around-your-elements"
+ "guideUrl": "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements"
},
{
"id": "bad87fee1348bd9aedf08814",
@@ -1284,7 +1284,7 @@
]
}
},
- "guideUrl":"https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius"
+ "guideUrl": "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius"
},
{
"id": "bad87fee1348bd9aedf08815",
@@ -1890,7 +1890,7 @@
]
}
},
- "guideUrl":"https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element"
+ "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element"
},
{
"id": "bad87fee1348bd9aedf08822",
@@ -1989,7 +1989,7 @@
]
}
},
- "guideUrl":"https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element"
+ "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element"
},
{
"id": "bad87fee1348bd9aedf08823",
@@ -2184,7 +2184,7 @@
]
}
},
- "guideUrl":"https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element"
+ "guideUrl": "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element"
},
{
"id": "bad87fee1248bd9aedf08824",
@@ -3641,6 +3641,1616 @@
]
}
}
+ },
+ {
+ "id": "5a9d725e424fe3d0e10cad10",
+ "title": "Use CSS Variables to change several elements at once",
+ "description": [
+ "CSS Variables are a powerful way to change many CSS style properties at once by changing only one value.",
+ "Follow the instructions below to see how changing just 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 other elements 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 that 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 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: Apply the --penguin-skin variable 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: Apply the --penguin-skin variable 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: Apply the --penguin-skin variable 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 that this can be 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 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: Apply the fallback value of black 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 a variable, it is becomes available for you to use inside the element in which you create it. It also becomes available within any elements nested within it. This effect is known as cascading.",
+ "Because of cascading, 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 element is a container for the body element.",
+ "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": [
+ "",
+ "",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
",
+ "
--penguin-belly variable in the :root 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 they will set the value of that variable for the whole page.",
+ "You can then over-write these valuables by setting them again within a specific element.",
+ "
",
+ "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 wherever it is 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 this change in action."
+ ],
+ "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