diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json index fe3345e6ac6..824813f8095 100644 --- a/challenges/01-responsive-web-design/basic-css.json +++ b/challenges/01-responsive-web-design/basic-css.json @@ -1790,7 +1790,7 @@ "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's content and its border.", "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more padding than the blue box.", - "When you increase the blue box's padding, it will increase the distance between the text padding and the border around it.", + "When you increase the blue box's padding, it will increase the distance(padding) between the text and the border around it.", "
", "Change the padding of your blue box to match that of your red box." ], @@ -1814,12 +1814,14 @@ " }", " ", " .red-box {", - " background-color: red;", + " background-color: crimson;", + " color: #fff;", " padding: 20px;", " }", "", " .blue-box {", " background-color: blue;", + " color: #fff;", " padding: 10px;", " }", "", @@ -1895,7 +1897,7 @@ "title": "Adjust the Margin of an Element", "description": [ "An element's margin controls the amount of space between an element's border and surrounding elements.", - "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more margin than the blue box, making it appear smaller.", + "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger margin than the blue box, making it appear smaller.", "When you increase the blue box's margin, it will increase the distance between its border and surrounding elements.", "
", "Change the margin of the blue box to match that of the red box." @@ -1920,13 +1922,15 @@ " }", " ", " .red-box {", - " background-color: red;", + " background-color: crimson;", + " color: #fff;", " padding: 20px;", " margin: 20px;", " }", "", " .blue-box {", " background-color: blue;", + " color: #fff;", " padding: 20px;", " margin: 10px;", " }", @@ -2017,13 +2021,15 @@ " }", " ", " .red-box {", - " background-color: red;", + " background-color: crimson;", + " color: #fff;", " padding: 20px;", " margin: -15px;", " }", "", " .blue-box {", " background-color: blue;", + " color: #fff;", " padding: 20px;", " margin: 20px;", " }", @@ -2087,8 +2093,8 @@ "id": "bad87fee1348bd9aedf08824", "title": "Add Different Padding to Each Side of an Element", "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 properties.", + "Sometimes you will want to customize an element so that it has different amounts of padding on each of its sides.", + "CSS allows you to control the padding of all four individual sides of an element with the padding-top, padding-right, padding-bottom, and padding-left properties.", "
", "Give the blue box a padding of 40px on its top and left side, but only 20px on its bottom and right side." ], @@ -2112,7 +2118,8 @@ " }", " ", " .red-box {", - " background-color: red;", + " background-color: crimson;", + " color: #fff;", " padding-top: 40px;", " padding-right: 20px;", " padding-bottom: 20px;", @@ -2121,6 +2128,7 @@ "", " .blue-box {", " background-color: blue;", + " color: #fff;", " }", "", "
margin
", @@ -2183,7 +2191,7 @@ "title": "Add Different Margins to Each Side of an Element", "description": [ "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 properties.", + "CSS allows you to control the margin of all four individual sides of an element with the margin-top, margin-right, margin-bottom, and margin-left properties.", "
", "Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side." ], @@ -2207,7 +2215,8 @@ " }", " ", " .red-box {", - " background-color: red;", + " background-color: crimson;", + " color: #fff;", " margin-top: 40px;", " margin-right: 20px;", " margin-bottom: 20px;", @@ -2216,6 +2225,7 @@ "", " .blue-box {", " background-color: blue;", + " color: #fff;", " }", "", "
margin
", @@ -2276,7 +2286,7 @@ "id": "bad87fee1348bd9aedf08826", "title": "Use Clockwise Notation to Specify the Padding of an Element", "description": [ - "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:", + "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties individually, 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.", "
", @@ -2302,12 +2312,14 @@ " }", " ", " .red-box {", - " background-color: red;", + " background-color: crimson;", + " color: #fff;", " padding: 20px 40px 20px 40px;", " }", "", " .blue-box {", " background-color: blue;", + " color: #fff;", " }", "", "
margin
", @@ -2374,7 +2386,7 @@ "title": "Use Clockwise Notation to Specify the Margin of an Element", "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 properties, you can specify them all in one line, like this:", + "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties individually, 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.", "
", @@ -2400,12 +2412,14 @@ " }", " ", " .red-box {", - " background-color: red;", + " background-color: crimson;", + " color: #fff;", " margin: 20px 40px 20px 40px;", " }", "", " .blue-box {", " background-color: blue;", + " color: #fff;", " }", "", "
margin
",