diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json
index 859c66073e1..0d1de62862a 100644
--- a/challenges/01-responsive-web-design/basic-css.json
+++ b/challenges/01-responsive-web-design/basic-css.json
@@ -1786,10 +1786,10 @@
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
"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 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.",
+ "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.",
"
padding
of your green box to match that of your red box."
+ "Change the padding
of your blue box to match that of your red box."
],
"challengeSeed": [
"",
@@ -1824,11 +1824,11 @@
"",
"green-box
class should give elements 20px
of padding
.');"
+ "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'message: Your blue-box
class should give elements 20px
of padding
.');"
],
"type": "waypoint",
"challengeType": 0,
@@ -1840,9 +1840,9 @@
"Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.",
"Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: padding
, margin
und border
.",
"padding
kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – border
",
- "Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding
hat als die grüne Box.",
+ "Wir sehen in diesem Beispiel, dass sich die blaue Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr padding
hat als die blaue Box.",
"padding
der grünen Box um es an die rote Box anzugleichen."
+ "Ändere das padding
der blauen Box um es an die rote Box anzugleichen."
]
},
"es": {
@@ -1891,10 +1891,10 @@
"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 green box and the red box are nested within the yellow box. Note that the red box has more margin
than the green box, making it appear smaller.",
- "When you increase the green box's margin
, it will increase the distance between its 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.",
+ "When you increase the blue box's margin
, it will increase the distance between its border and surrounding elements.",
"margin
of the green box to match that of the red box."
+ "Change the margin
of the blue box to match that of the red box."
],
"challengeSeed": [
"",
"green-box
class should give the top of the elements 40px
of padding
.');",
- "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box
class should give the right of the elements 20px
of padding
.');",
- "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box
class should give the bottom of the elements 20px
of padding
.');",
- "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box
class should give the left of the elements 40px
of padding
.');"
+ "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your blue-box
class should give the top of the elements 40px
of padding
.');",
+ "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your blue-box
class should give the right of the elements 20px
of padding
.');",
+ "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your blue-box
class should give the bottom of the elements 20px
of padding
.');",
+ "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your blue-box
class should give the left of the elements 40px
of padding
.');"
],
"type": "waypoint",
"challengeType": 0,
@@ -2139,7 +2139,7 @@
"Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also padding
– geben wollen.",
"CSS erlaubt dir den Innenabstand - padding
- eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top
, padding-right
, padding-bottom
und padding-left
zu steuern.",
"padding
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
+ "Verleihe der blauen Box einen Innenabstand – padding
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
]
},
"es": {
@@ -2178,7 +2178,7 @@
"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.",
"margin
of 40px
on its top and left side, but only 20px
on its bottom and right side."
+ "Give the blue box a margin
of 40px
on its top and left side, but only 20px
on its bottom and right side."
],
"challengeSeed": [
"",
"green-box
class should give the top of elements 40px
of margin
.');",
- "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box
class should give the right of elements 20px
of margin
.');",
- "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box
class should give the bottom of elements 20px
of margin
.');",
- "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box
class should give the left of elements 40px
of margin
.');"
+ "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your blue-box
class should give the top of elements 40px
of margin
.');",
+ "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your blue-box
class should give the right of elements 20px
of margin
.');",
+ "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your blue-box
class should give the bottom of elements 20px
of margin
.');",
+ "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your blue-box
class should give the left of elements 40px
of margin
.');"
],
"type": "waypoint",
"challengeType": 0,
@@ -2233,7 +2233,7 @@
"Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - margin
- geben wollen.",
"CSS erlaubt dir ebenfalls den Außenabstand - margin
- eines Elements auf jeder Seite einzeln mit den Eigenschaften margin-top
, margin-right
, margin-bottom
und margin-left
zu steuern.",
"margin
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
+ "Gib der blauen Box einen Außenabstand – margin
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
]
},
"es": {
@@ -2273,7 +2273,7 @@
"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.",
"padding
of 40px
on its top and left side, but only 20px
on its bottom and right side."
+ "Use Clockwise Notation to give the \".blue-box\" class a padding
of 40px
on its top and left side, but only 20px
on its bottom and right side."
],
"challengeSeed": [
"",
"green-box
class should give the top of elements 40px
of padding
.');",
- "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box
class should give the right of elements 20px
of padding
.');",
- "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box
class should give the bottom of elements 20px
of padding
.');",
- "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box
class should give the left of elements 40px
of padding
.');",
- "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of green-box
class.');"
+ "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your blue-box
class should give the top of elements 40px
of padding
.');",
+ "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your blue-box
class should give the right of elements 20px
of padding
.');",
+ "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your blue-box
class should give the bottom of elements 20px
of padding
.');",
+ "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your blue-box
class should give the left of elements 40px
of padding
.');",
+ "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of blue-box
class.');"
],
"type": "waypoint",
"challengeType": 0,
@@ -2327,7 +2327,7 @@
"padding: 10px 20px 10px 20px;
",
"Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.",
"padding
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
+ "Gib der Klasse \".blue-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding
– von 40px
auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite."
]
},
"es": {
@@ -2337,7 +2337,7 @@
"padding: 10px 20px 10px 20px;
",
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
".green-box
\" un relleno de 40px
en las partes superior e izquierda, pero sólo 20px
en su parte inferior y al lado derecho ."
+ "Usa la notación en sentido horario para dar a la clase \".blue-box
\" un relleno de 40px
en las partes superior e izquierda, pero sólo 20px
en su parte inferior y al lado derecho ."
]
},
"pt-br": {
@@ -2347,7 +2347,7 @@
"padding: 10px 20px 10px 20px;
",
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.",
"notação em sentido horário
para dar para a classe \".green-box
\" um preenchimento de 40px
nas partes superior e esquerda, mas de apenas 20px
em sua parte inferior e ao lado direito."
+ "Use a notação em sentido horário
para dar para a classe \".blue-box
\" um preenchimento de 40px
nas partes superior e esquerda, mas de apenas 20px
em sua parte inferior e ao lado direito."
]
},
"ru": {
@@ -2357,7 +2357,7 @@
"padding: 10px 20px 10px 20px;
",
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
"padding
равное 40px
сверху и слева, но только 20px
снизу и справа."
+ "Используйте систему ссылок по часовой стрелке для установки для класса \".blue-box\" значения отступа содержимого padding
равное 40px
сверху и слева, но только 20px
снизу и справа."
]
}
}
@@ -2371,7 +2371,7 @@
"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.",
"Clockwise Notation
to give the element with the green-box
class a margin of 40px
on its top and left side, but only 20px
on its bottom and right side."
+ "Use Clockwise Notation
to give the element with the blue-box
class a margin of 40px
on its top and left side, but only 20px
on its bottom and right side."
],
"challengeSeed": [
"",
"green-box
class should give the top of elements 40px
of margin
.');",
- "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box
class should give the right of elements 20px
of margin
.');",
- "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box
class should give the bottom of elements 20px
of margin
.');",
- "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box
class should give the left of elements 40px
of margin
.');"
+ "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your blue-box
class should give the top of elements 40px
of margin
.');",
+ "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your blue-box
class should give the right of elements 20px
of margin
.');",
+ "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your blue-box
class should give the bottom of elements 20px
of margin
.');",
+ "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your blue-box
class should give the left of elements 40px
of margin
.');"
],
"type": "waypoint",
"challengeType": 0,
@@ -2425,7 +2425,7 @@
"margin: 10px 20px 10px 20px;
",
"Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.",
"Clockwise Notation
genannt – um dem Element mit der Klasse green-box
40px
Außenabstand auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite zu verleihen."
+ "Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation
genannt – um dem Element mit der Klasse blue-box
40px
Außenabstand auf der oberen und linken Seite, aber nur 20px
auf der unteren und rechten Seite zu verleihen."
]
},
"es": {
@@ -2436,7 +2436,7 @@
"margin: 10px 20px 10px 20px;
",
"Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
"notación en sentido horario
para dar al elemento con la clase green-box
un margen de 40px
en las partes superior e izquierda, pero sólo 20px
en su parte inferior y al lado derecho ."
+ "Usa notación en sentido horario
para dar al elemento con la clase blue-box
un margen de 40px
en las partes superior e izquierda, pero sólo 20px
en su parte inferior y al lado derecho ."
]
},
"pt-br": {
@@ -2447,7 +2447,7 @@
"margin: 10px 20px 10px 20px;
",
"Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.",
"notação em sentido horário
para dar para a classe \".green-box
\" uma margem de 40px
nas partes superior e esquerda, mas de apenas 20px
em sua parte inferior e ao lado direito."
+ "Use a notação em sentido horário
para dar para a classe \".blue-box
\" uma margem de 40px
nas partes superior e esquerda, mas de apenas 20px
em sua parte inferior e ao lado direito."
]
},
"ru": {
@@ -2458,7 +2458,7 @@
"margin: 10px 20px 10px 20px;
",
"Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
"green-box
значения отступа margin
равное 40px
сверху и слева, но только 20px
снизу и справа."
+ "Используйте систему ссылок по часовой стрелке для установки для класса blue-box
значения отступа margin
равное 40px
сверху и слева, но только 20px
снизу и справа."
]
}
}