diff --git a/seed/challenges/01-responsive-web-design/basic-css.json b/seed/challenges/01-responsive-web-design/basic-css.json index a2226c275f..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", @@ -3644,9 +3644,10 @@ }, { "id": "5a9d725e424fe3d0e10cad10", - "title": "Quickly change many styles with CSS Variables", + "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 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.", + "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." ], @@ -3871,7 +3872,7 @@ "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.", + "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" ], @@ -4091,7 +4092,7 @@ "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.", + "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." ], @@ -4308,10 +4309,10 @@ "" ], "tests": [ - "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'message: --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.');" + "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'message: Apply the --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": [], @@ -4324,10 +4325,11 @@ "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:", + "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.", + "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." ], @@ -4538,8 +4540,8 @@ "" ], "tests": [ - "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'message: The fallback value of 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.');" + "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'message: Apply the fallback value of 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": [], @@ -4552,7 +4554,10 @@ "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.", + "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." ], @@ -4761,7 +4766,7 @@ "" ], "tests": [ - "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'message: :root should declare the --penguin-belly variable and assign it to pink.');" + "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'message: declare the --penguin-belly variable in the :root and assign it to pink.');" ], "solutions": [], "hints": [], @@ -4774,7 +4779,8 @@ "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.", + "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." ], @@ -4985,7 +4991,7 @@ "" ], "tests": [ - "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'message: penguin class should reassign the --penguin-belly variable to white.');" + "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'message: The penguin class should reassign the --penguin-belly variable to white.');" ], "solutions": [], "hints": [], @@ -4998,9 +5004,10 @@ "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.", + "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 the change." + "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": [ "