CAMPER CAFE
Est. 2020
@@ -63,7 +65,7 @@ h1, h2, p { text-align: center; } --fcc-editable-region-- -div { +#menu { width: 300px; background-color: burlywood; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md index 5f4153cbb76..fd5f572c78e 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md @@ -14,7 +14,7 @@ dashedName: step-22 /* comment here */ ``` -في الـ style sheet الخاصة بك، علق على السطر الذي يحتوي على الخاصية والقيمة `background-color`، حتى تتمكن من مشاهدة تأثير تغيير نمط (styling) عنصر `div` فقط. هذا سيجعل الخلفية بيضاء مرة أخرى. +In your style sheet, comment out the line containing the `background-color` property and value, so you can see the effect of only styling the `#menu` element. هذا سيجعل الخلفية بيضاء مرة أخرى. # --hints-- @@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)") -CAMPER CAFE
Est. 2020
@@ -70,7 +70,7 @@ h1, h2, p { text-align: center; } -div { +#menu { width: 300px; } ``` diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md index 955e69fccf8..9ce819e80bb 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md @@ -7,7 +7,9 @@ dashedName: step-26 # --description-- -حتى الآن كنت تستخدم محددات النوع (type selectors) لتغيبر أنماط (style) العناصر. class selector يتم تعريفه باسم مع نقطة مباشرة أمامه، مثل هذا: +So far you have been using type and id selectors to style elements. However, it is more common to use a different selector to style your elements. + +A class selector is defined by a name with a dot directly in front of it, like this: ```css .class-name { @@ -15,21 +17,21 @@ dashedName: step-26 } ``` -قم بتغيير منتقي `div` الحالي إلى class selector عن طريق استبدال `div` بـ class يسمى `menu`. +Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`. # --hints-- -يجب أن يكون لديك class selector يسمي `.menu`. +You should have a `.menu` class selector. ```js const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu'); assert(hasMenu); ``` -يجب ألا يكون لديك منتقي `div`. +You should not have a `#menu` selector. ```js -const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); +const hasDiv = new __helpers.CSSHelp(document).getStyle('#menu'); assert(!hasDiv); ``` @@ -47,7 +49,7 @@ assert(!hasDiv); -CAMPER CAFE
Est. 2020
@@ -72,7 +74,7 @@ h1, h2, p { } --fcc-editable-region-- -div { +#menu { width: 80%; background-color: burlywood; margin-left: auto; diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md index 467d8f50c86..5006ce77d74 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md @@ -7,28 +7,38 @@ dashedName: step-21 # --description-- -الهدف الآن هو جعل `div` لا يأخذ كامل عرض الصفحة. خاصية `width` في CSS مثالية لهذا. أنشئ منتقي نوع جديد (new type selector) في المِلَفّ الأسلوب الذي تعطي عنصر `div` العرض `300px`. +الهدف الآن هو جعل `div` لا يأخذ كامل عرض الصفحة. خاصية `width` في CSS مثالية لهذا. + +You can use the `id` selector to target a specific `div` element. An id selector is defined by a name with a hash symbol directly in front of it, like this: + +```css +#example-id { + width: 250px; +} +``` + +Use the `#menu` selector to give your element a width of `300px`. # --hints-- -يجب أن يكون لديك منتقي نوع (type selector) من `div`. +You should have a `#menu` selector. ```js -const hasDiv = new __helpers.CSSHelp(document).getStyle('div'); +const hasDiv = new __helpers.CSSHelp(document).getStyle("#menu"); assert(hasDiv); ``` -يجب عليك تعيين خاصية `width` إلى `300px`. +You should set the `width` property to `300px`. ```js const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px'); assert(hasWidth); ``` -يجب أن يكون عرض `div` الخاص بك 300px. +Your `div` should have a width of 300px. ```js -const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width'); +const divWidth = new __helpers.CSSHelp(document).getStyle("#menu")?.getPropertyValue('width'); assert(divWidth === '300px'); ``` @@ -46,7 +56,7 @@ assert(divWidth === '300px'); -CAMPER CAFE
Est. 2020
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md index a17a2cc3292..200426cf39b 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md @@ -7,7 +7,7 @@ dashedName: step-23 # --description-- -الآن استخدم منتقي `div` الحالي لتعيين لون خلفية عنصر `div` ليكون `burlywood`. +Now use the existing `#menu` selector to set the background color of the `div` element to be `burlywood`. # --hints-- @@ -18,10 +18,10 @@ const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x assert(hasBackgroundColor); ``` -يجب أن يكون `div` خلفية burlywood. +Your `#menu` selector should have a burlywood background. ```js -const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color'); +const divBackground = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('background-color'); assert(divBackground === 'burlywood'); ``` @@ -39,7 +39,7 @@ assert(divBackground === 'burlywood'); -CAMPER CAFE
Est. 2020
@@ -64,7 +64,7 @@ h1, h2, p { } --fcc-editable-region-- -div { +#menu { width: 300px; } --fcc-editable-region-- diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md index 71824e35726..6d54a952060 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md @@ -7,7 +7,7 @@ dashedName: step-25 # --description-- -بعد ذلك ، تريد توسيط `div` أفقيًا. يمكنك القيام بذلك عن طريق تعيين خواص `margin-left` و `margin-right` إلى `auto`. فكر في الـ margin كمساحة غير مرئية حول عنصر ما. باستخدام خاصيتي الـ margin هاتين ، قم بتوسيط عنصر `div` داخل عنصر `body`. +Next, you want to center the `#menu` horizontally. يمكنك القيام بذلك عن طريق تعيين خواص `margin-left` و `margin-right` إلى `auto`. فكر في الـ margin كمساحة غير مرئية حول عنصر ما. Using these two margin properties, center the `#menu` element within the `body` element. # --hints-- @@ -25,11 +25,11 @@ const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.styl assert(hasMargin); ``` -يجب عليك تعيين خصائص `margin-left` و `margin-right` للـ `div` إلى `auto`. +You should set the `margin-left` and `margin-right` properties of your `#menu` to `auto`. ```js -const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right'); -const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left'); +const divMarginRight = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('margin-right'); +const divMarginLeft = new __helpers.CSSHelp(document).getStyle('#menu')?.getPropertyValue('margin-left'); assert(divMarginRight === 'auto'); assert(divMarginLeft === 'auto'); ``` @@ -48,7 +48,7 @@ assert(divMarginLeft === 'auto'); -CAMPER CAFE
Est. 2020
@@ -73,7 +73,7 @@ h1, h2, p { } --fcc-editable-region-- -div { +#menu { width: 80%; background-color: burlywood; } diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md index fa1dff96480..aa15b6727d6 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md @@ -7,7 +7,7 @@ dashedName: step-27 # --description-- -لتطبيق أسلوب الفئة على العنصر `div`، أضف سمة `class` إلى علامة المفتوحة (opening tag) لعنصر `div` وتعيين قيمته إلى `menu`. +To apply the class's styling to the `div` element, remove the `id` attribute and add a `class` attribute to the `div` element's opening tag. Make sure to set the class value to `menu`. # --hints-- @@ -23,6 +23,12 @@ assert($('div').length === 1); assert($('div').attr('class').includes('menu')); ``` +Your `div` element should no longer have the `menu` id. + +```js +assert(!$('div#menu').length); +``` + # --seed-- ## --seed-contents-- @@ -38,7 +44,7 @@ assert($('div').attr('class').includes('menu')); --fcc-editable-region-- -CAMPER CAFE
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md index 77e2ad30d71..5a77be88878 100644 --- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md +++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md @@ -9,33 +9,37 @@ dashedName: step-20 يُستخدم عنصر `div` بشكل أساسي لأغراض تخطيط التصميم بخلاف عناصر المحتوى الأخرى التي استخدمتها حتى الآن. أضف عنصر `div` داخل عنصر `body` ثم حرك جميع العناصر الأخرى داخل `div` الجديد. +Inside the opening `div` tag, add the `id` attribute with a value of `menu`. + # --hints-- -يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتية `I think freeCodeCamp is great.
+I think freeCodeCamp is great.
``` -In the text of your `p` element, turn the words `cat photos` into a link by adding opening and closing anchor (`a`) tags around these words. Then set the `href` attribute to `https://freecatphotoapp.com/` +In the text of your `p` element, turn the words `cat photos` into a link by adding opening and closing anchor (`a`) tags around these words. Then set the `href` attribute to `https://freecatphotoapp.com` # --hints-- @@ -21,22 +21,22 @@ In the text of your `p` element, turn the words `cat photos` into a link by addi يجب عليك أدخال عنصر `a` داخل عنصر `p`. ```js -assert($('p > a').length); +const nestedAnchor = document.querySelector(`p > a`); +assert.isNotNull(nestedAnchor) ``` يجب أن يكون سمة الرابط `href` بقيمة `https://freecatphotoapp.com`. إما أنك حذفت قيمة `href` أو لديك خطأ إملائي. ```js -const nestedAnchor = $('p > a')[0]; assert( - nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com' + document.querySelector('p > a').href === 'https://freecatphotoapp.com/' ); ``` يجب أن يكون نص الرابط `cat photos`. إما أنك حذفت النص أو لديك خطأ إملائي. ```js -const nestedAnchor = $('p > a')[0]; +const nestedAnchor = document.querySelector(`p > a`); assert( nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' ); @@ -45,11 +45,7 @@ assert( بعد إدخال عنصر الرابط (`a`)، يجب أن يكون محتوى العنصر `p` الوحيد المرئي في المتصفح `See more cat photos in our gallery.` أعد التحقق من النص أو المسافات أو علامات الترقيم لكل من `p` وعنصر الرابط داخله. ```js -const pText = document - .querySelector('p') - .innerText.toLowerCase() - .replace(/\s+/g, ' '); -assert(pText.match(/see more cat photos in our gallery\.?$/)); +assert.match(code, /see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 56ab2cc5019..30f40214c57 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ ourStorage.desk.drawer;
assert(gloveBoxContents === 'maps');
```
-你的代碼應該使用點號和方括號來訪問 `myStorage`。
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
應該用 `const` 聲明 `gloveBoxContents`。
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index b1d044df50c..73379ee714e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-現在很容易看到文本在 `div` 元素內居中。 目前,`div` 元素的寬度以像素(`px`)爲單位。 將 `width` 屬性的值更改爲 `80%`,使其爲其父元素(`body`)的寬度的 80%。
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-你應該將 `width` 屬性設置爲 `80%`。
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-你的 `width` 屬性值不應爲 `300px`。
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 0b2c251f9db..f07b62114a2 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ ourStorage.desk.drawer;
assert(gloveBoxContents === 'maps');
```
-你的代码应该使用点号和方括号来访问 `myStorage`。
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
应该用 `const` 声明 `gloveBoxContents`。
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index a1fc24a55f3..a7887e888a3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-现在很容易看到文本在 `div` 元素内居中。 目前,`div` 元素的宽度以像素(`px`)为单位。 将 `width` 属性的值更改为 `80%`,使其为其父元素(`body`)的宽度的 80%。
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-你应该将 `width` 属性设置为 `80%`。
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-你的 `width` 属性值不应为 `300px`。
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 3865c7b5849..28fe96436e1 100644
--- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ Accede al objeto `myStorage` y asigna el contenido de la propiedad `glove box` a
assert(gloveBoxContents === 'maps');
```
-Tu código debe utilizar notación de puntos y de corchetes para acceder a `myStorage`.
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
`gloveBoxContents` debe ser declarado como `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 429c2d4d50e..44b34fc301b 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-Ahora es fácil ver que el texto está centrado dentro del elemento `div`. Por ahora, el ancho (width) del elemento `div` está en píxeles (`px`). Cambia el valor de la propiedad `width` a `80%`, para que tenga el 80% del ancho de su elemento padre (`body`).
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-La propiedad `width` debe tener el valor `80%`.
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-No debes tener ni una propiedad `width` con el valor `300px`.
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index da7478ae36d..e7a58ff65e8 100644
--- a/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/german/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ Greife auf das Objekt `myStorage` zu und weise den Inhalt der Eigenschaft `glove
assert(gloveBoxContents === 'maps');
```
-Dein Code sollte die Punkt- und Klammerschreibweise verwenden, um auf `myStorage` zuzugreifen.
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
`gloveBoxContents` sollte mit `const` deklariert werden.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 970e2167049..f7b1e615456 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-Nun ist es einfach zu sehen, dass der Text im `div` Element zentriert ist. Derzeit ist die Breite des `div` Elements in Pixeln angegeben (`px`). Ändere den Wert der `width`-Eigenschaft auf `80%`, damit sie 80% der Breite seines Elternelements (`body`) entspricht.
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-Du solltest die `width` Eigenschaft auf `80%` setzen.
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-Du solltest keine `width` Eigenschaft von `300px` haben.
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
index 3d6d138f125..64a45e2cf1f 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
@@ -41,7 +41,7 @@ assert(
);
```
-The `p` element content visible in the browser should be `See more cat photos in our gallery.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
+Der im Browser sichtbare Inhalt des `p`-Elements sollte `See more cat photos in our gallery.` lauten. Überprüfe den Text, die Abstände oder die Satzzeichen des `p`-Elements und des eingebetteten Ankerelements.
```js
const pText = document
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md
index 3d897404664..bfc4714a54b 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c47867800472a4ed5d2ea.md
@@ -1,23 +1,23 @@
---
id: 646c47867800472a4ed5d2ea
-title: Step 1
+title: Schritt 1
challengeType: 0
dashedName: step-1
---
# --description--
-Begin with the basic HTML structure. Add a `DOCTYPE` reference of `html` and an `html` element with its `lang` attribute set to `en`. Also, add a `head` and a `body` element within the `html` element.
+Beginne mit der grundlegenden HTML-Struktur. Add a `DOCTYPE` reference of `html` and an `html` element with its `lang` attribute set to `en`. Also, add a `head` and a `body` element within the `html` element.
# --hints--
-You should have the `DOCTYPE` declaration of `html`.
+Du solltest eine `DOCTYPE`-Deklaration von `html` haben.
```js
assert(code.match(//i));
```
-Your `DOCTYPE` declaration should be at the beginning of your HTML.
+Deine `DOCTYPE`-Deklaration sollte am Anfang deines HTMLs stehen.
```js
assert(__helpers.removeHtmlComments(code).match(/^\s*/i));
@@ -29,37 +29,37 @@ You should have an opening `html` tag with a `lang` attribute of `en`.
assert(code.match(//gi));
```
-You should have a closing `html` tag.
+Du solltest ein abschließendes `html`-Tag haben.
```js
assert(code.match(/<\/html>/i));
```
-You should have an opening `head` tag.
+Du solltest ein öffnendes `head`-Tag haben.
```js
assert(code.match(//i));
```
-You should have a closing `head` tag.
+Du solltest ein abschließendes `head`-Tag haben.
```js
assert(code.match(/<\/head>/i));
```
-You should have an opening `body` tag.
+Du solltest ein öffnendes `body`-Tag haben.
```js
assert(code.match(//i));
```
-You should have a closing `body` tag.
+Du solltest ein abschließendes `body`-Tag haben.
```js
assert(code.match(/<\/body>/i));
```
-Your `body` element should come after the `head` element.
+Dein `body`-Element sollte nach dem `head`-Element stehen.
```js
assert(code.match(/\s*<\/head>\s*\s*<\/body>/i));
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md
index 81eb5c83f27..1896f36364a 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ace05e4be4211407935.md
@@ -1,6 +1,6 @@
---
id: 646c5ace05e4be4211407935
-title: Step 8
+title: Schritt 8
challengeType: 0
dashedName: step-8
---
@@ -9,29 +9,29 @@ dashedName: step-8
To see the `cat-head` element, give it a linear gradient background with `#5e5e5e` at `85%` and `#45454f` at `100%`.
-You might not notice the difference between these two colors, but they are there.
+Vielleicht fällt dir der Unterschied zwischen den beiden Farben nicht auf, aber er ist dennoch vorhanden.
# --hints--
-Your `.cat-head` selector should have a `background` property.
+Dein `.cat-head`-Selektor sollte eine `background`-Eigenschaft enthalten.
```js
assert.match(code, /background:/)
```
-Your `background` property should use the `linear-gradient` function.
+Deine `background`-Eigenschaft sollte die `linear-gradient`-Funktion verwenden.
```js
assert.match(code, /background:\s*linear-gradient\(/)
```
-Your `linear-gradient` function should set the first color to be `#5e5e5e` at `85%`.
+Deine `linear-gradient`-Funktion sollte die erste Farbe bei `85%` auf `#5e5e5e` setzen.
```js
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%/)
```
-Your `linear-gradient` function should set the second color to be `#45454f` at `100%`.
+Deine `linear-gradient`-Funktion sollte die zweite Farbe bei `100%` auf `#45454f` setzen.
```js
assert.match(code, /background:\s*linear-gradient\(#5e5e5e\s+85%,\s+#45454f\s+100%\);?/)
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md
index 98afa6c6b3b..2c4d2d860c6 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5d7057c45f432fcdd46c.md
@@ -1,6 +1,6 @@
---
id: 646c5d7057c45f432fcdd46c
-title: Step 7
+title: Schritt 7
challengeType: 0
dashedName: step-7
---
@@ -11,31 +11,31 @@ Using a class selector, give the `.cat-head` element a width of `205px` and a he
# --hints--
-You should have a `.cat-head` selector.
+Du solltest einen `.cat-head`-Selektor haben.
```js
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head'))
```
-Your `.cat-head` selector should have a `width` set to `205px`.
+Dein `.cat-head`-Selektor sollte eine `width` auf `205px` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.width === '205px');
```
-Your `.cat-head` selector should have a `height` set to `180px`.
+Dein `.cat-head`-Selektor sollte eine `height` auf `180px` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.height === '180px')
```
-Your `.cat-head` selector should have a `border` set to `1px solid #000`.
+Dein `.cat-head`-Selektor sollte eine `border` auf `1px solid #000` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document)?.getStyle('.cat-head')?.border === '1px solid rgb(0, 0, 0)')
```
-Your `.cat-head` selector should have a `border-radius` set to `46%`.
+Dein `.cat-head`-Selektor sollte einen `border-radius` auf `46%` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document)?.getStyle(".cat-head")?.borderRadius === '46%')
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md
index 9c460caa45f..1624b8f93f0 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646c5ffef5598d449b52ec12.md
@@ -1,31 +1,31 @@
---
id: 646c5ffef5598d449b52ec12
-title: Step 19
+title: Schritt 19
challengeType: 0
dashedName: step-19
---
# --description--
-Now you should work on the cat's ears. There will be a right and a left ear, and inside each, there will be an inner ear.
+Jetzt solltest du die Katzenohren bearbeiten. Es wird ein rechtes und linkes Ohr geben, und in jedem wird sich ein Innenohr befinden.
-Inside your `.cat-head` element, create a `div` element with the class `cat-ears`.
+Erstelle innerhalb deines `.cat-head`-Elements, ein `div`-Element mit der Klasse `cat-ears`.
# --hints--
-You should not change the existing `div` element with the class `cat-head`.
+Du solltest dein vorhandenes `div`-Element nicht mit der Klasse `cat-head` verändern.
```js
assert(document.querySelectorAll('div.cat-head').length === 1);
```
-You should create one `div` element inside your `.cat-head` element.
+Du solltest ein `div`-Element innerhalb deines `.cat-head`-Elements erstellen.
```js
assert(document.querySelectorAll('.cat-head div').length === 1);
```
-Your `div` element should have the class `cat-ears`.
+Dein `div`-Element sollte die Klasse `cat-ears` enthalten.
```js
assert(document.querySelectorAll('.cat-head div')[0]?.getAttribute('class') === 'cat-ears');
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
index ae13eae4db7..438f93f8dfc 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ceb843412c74edee27a79.md
@@ -1,6 +1,6 @@
---
id: 646ceb843412c74edee27a79
-title: Step 23
+title: Schritt 23
challengeType: 0
dashedName: step-23
---
@@ -13,25 +13,25 @@ Using a class selector, give the `.cat-left-ear` element a left and right border
# --hints--
-You should have a `.cat-left-ear` selector.
+Du solltest einen `.cat-left-ear`-Selektor haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear'))
```
-Your `.cat-left-ear` selector should have a `border-left` property set to `35px solid transparent`
+Dein `.cat-left-ear`-Selektor sollte eine `border-left`-Eigenschaft auf `35px solid transparent` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderLeft === '35px solid transparent')
```
-Your `.cat-left-ear` selector should have a `border-right` property set to `35px solid transparent`
+Dein `.cat-left-ear`-Selektor sollte eine `border-right`-Eigenschaft auf `35px solid transparent` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderRight === '35px solid transparent')
```
-Your `.cat-left-ear` selector should have a `border-bottom` property set to `70px solid #5e5e5e`
+Dein `.cat-left-ear`-Selektor sollte eine `border-bottom`-Eigenschaft auf `70px solid #5e5e5e` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-ear')?.borderBottom === '70px solid rgb(94, 94, 94)')
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md
index d4525731d1f..ca9ac64e8b8 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cf6cbca98e258da65c979.md
@@ -1,6 +1,6 @@
---
id: 646cf6cbca98e258da65c979
-title: Step 29
+title: Schritt 29
challengeType: 0
dashedName: step-29
---
@@ -11,7 +11,7 @@ As you did for the left ear, rotate the right ear at 45 degrees.
# --hints--
-You should set the `transform` property of your `.right-ear` element to `rotate(45deg)`. Don't forget to add a semi-colon.
+Du solltest die `transform`-Eigenschaft deines `.right-ear`-Elements auf `rotate(45deg)` setzen. Vergiss nicht, ein Semikolon hinzuzufügen.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.transform === 'rotate(45deg)')
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md
index b892d61ca1d..b640ee336e0 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646cfde6ac612e5d60391f50.md
@@ -1,6 +1,6 @@
---
id: 646cfde6ac612e5d60391f50
-title: Step 33
+title: Schritt 33
challengeType: 0
dashedName: step-33
---
@@ -11,7 +11,7 @@ Set the `z-index`property of the right ear to `1` so it always stays over the he
# --hints--
-Your `.cat-right-ear` selector should have a `z-index` of `1`. Don't forget to add a semi-colon.
+Dein `.cat-right-ear`-Selektor sollte einen `z-index` mit dem Wert `1` enthalten. Vergiss nicht, ein Semikolon hinzuzufügen.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-ear')?.zIndex === '1')
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md
index 7e24c8e937c..3e1b29f5705 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd7cfd0cfac630c1dd520.md
@@ -11,13 +11,13 @@ To remove all the pointed edges of the ear, set a bottom-right and bottom-left b
# --hints--
-Your `.cat-left-inner-ear` selector should have a `border-bottom-right-radius` property set to `40%`.
+Dein `.cat-left-inner-ear`-Selektor sollte eine `border-bottom-right-radius`-Eigenschaft auf `40%` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomRightRadius === '40%')
```
-Your `.cat-left-inner-ear` selector should have a `border-bottom-left-radius` property set to `40%`.
+Dein `.cat-left-inner-ear`-Selektor sollte eine `border-bottom-left-radius`-Eigenschaft auf `40%` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-left-inner-ear')?.borderBottomLeftRadius === '40%')
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md
index ba3b89e07d1..bf258f510b8 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646dd8c79ec23463a3d0e356.md
@@ -1,6 +1,6 @@
---
id: 646dd8c79ec23463a3d0e356
-title: Step 37
+title: Schritt 37
challengeType: 0
dashedName: step-37
---
@@ -11,25 +11,25 @@ It's time to work on the right inner ear. Using a class selector, give your `.ca
# --hints--
-You should have a `.cat-right-inner-ear` selector.
+Du solltest einen `.cat-right-inner-ear`-Selektor haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear'))
```
-Your `.cat-right-inner-ear` selector should have a `border-left` property set to `20px solid transparent`.
+Dein `.cat-right-inner-ear`-Selektor sollte eine `border-left`-Eigenschaft auf `20px solid transparent` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderLeft === '20px solid transparent')
```
-Your `.cat-right-inner-ear` selector should have a `border-right` property set to `20px solid transparent`.
+Dein `.cat-right-inner-ear`-Selektor sollte eine `border-right`-Eigenschaft auf `20px solid transparent` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderRight === '20px solid transparent')
```
-Your `.cat-right-inner-ear` selector should have a `border-bottom` property set to `40px solid #3b3b4f`.
+Dein `.cat-right-inner-ear`-Selektor sollte eine `border-bottom`-Eigenschaft auf `40px solid #3b3b4f` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-right-inner-ear')?.borderBottom === '40px solid rgb(59, 59, 79)')
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md
index 5a2488dca6b..bdaf5751c94 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646ddb61ff08366570cc5902.md
@@ -1,6 +1,6 @@
---
id: 646ddb61ff08366570cc5902
-title: Step 40
+title: Schritt 40
challengeType: 0
dashedName: step-40
---
@@ -9,29 +9,29 @@ dashedName: step-40
You will now start working on the cat's eyes. Like the ears, the eyes will have inner eyes.
-Create a `div` element with the class `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively.
+Erstelle ein `div`-Element mit der Klasse `cat-eyes`. Inside the `cat-eyes` element, create two `div` elements with the class `cat-left-eye` and `cat-right-eye` respectively.
# --hints--
-You should create a `div` element with the class `cat-eyes`.
+Du solltest ein `div`-Element mit der Klasse `cat-eyes` erstellen.
```js
assert(document.querySelectorAll('.cat-eyes').length === 1);
```
-You should create two `div` elements inside the `.cat-eyes` element.
+Du solltest zwei `div`-Elemente innerhalb deines `.cat-eyes`-Element erstellen.
```js
assert(document.querySelectorAll('.cat-eyes div').length === 2);
```
-The first `div` element inside the `.cat-eyes` element should have the class `cat-left-eye`.
+Das erste `div`-Element innerhalb des `.cat-eyes`-Elements sollte die Klasse `cat-left-eye` enthalten.
```js
assert(document.querySelectorAll('.cat-eyes div')[0].classList.contains('cat-left-eye'));
```
-The second `div` element inside the `.cat-eyes` element should have the class `cat-right-eye`.
+Das zweite `div`-Element innerhalb des `.cat-eyes`-Elements sollte die Klasse `cat-right-eye` enthalten.
```js
assert(document.querySelectorAll('.cat-eyes div')[1].classList.contains('cat-right-eye'));
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md
index 820cbd44d12..0e01f7cdf20 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f102bf87b350b593baa72.md
@@ -1,6 +1,6 @@
---
id: 646f102bf87b350b593baa72
-title: Step 68
+title: Schritt 68
challengeType: 0
dashedName: step-68
---
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md
index 651a9405914..21129d63031 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f1764e2f1d212ba9785a7.md
@@ -11,25 +11,25 @@ Using a class selector, move the `.cat-whisker-left-bottom` into position with a
# --hints--
-You should have a `.cat-whisker-left-bottom` selector.
+Du solltest einen `.cat-whisker-left-bottom`-Selektor haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom'))
```
-Your `.cat-whisker-left-bottom` selector should have a `position` property set to `absolute`.
+Dein `.cat-whisker-left-bottom`-Selektor sollte eine `position`-Eigenschaft auf `absolute` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.position === 'absolute')
```
-Your `.cat-whisker-left-bottom` selector should have a `top` property set to `134px`.
+Dein `.cat-whisker-left-bottom`-Selektor sollte eine `top`-Eigenschaft auf `134px` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.top === '134px')
```
-Your `.cat-whisker-left-bottom` selector should have a `left` property set to `52px`.
+Dein `.cat-whisker-left-bottom`-Selektor sollte eine `left`-Eigenschaft auf `52px` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-left-bottom')?.left === '52px')
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md
index e365b97d693..fc9cfc537ff 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/646f4d6c42dc5f214f4e7444.md
@@ -7,11 +7,11 @@ dashedName: step-77
# --description--
-Now you will work on moving the right whiskers into place. Use class selector to target the `.cat-whisker-right-top` element and give it a `position` of `absolute`, a `top` of `120px`, and a `left` of `109px`.
+Now you will work on moving the right whiskers into place. Wähle das `.cat-whisker-right-top`-Element mit Hilfe des Klassenselektors aus und weise ihm eine `position` von `absolute`, einen `top` von `120px` und einen `left` von `109px` zu.
# --hints--
-You should have a `.cat-whisker-right-top` selector.
+Du solltest einen `.cat-whisker-right-top`-Selektor haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-whisker-right-top'))
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md
index bd1a9049d86..ffb3e508c26 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/6476fd4213318f6ee211028a.md
@@ -1,15 +1,15 @@
---
id: 6476fd4213318f6ee211028a
-title: Step 14
+title: Schritt 14
challengeType: 0
dashedName: step-14
---
# --description--
-Now replace the `position` property value of your `.cat-head` with `fixed`. Leave both `top` and `left` as they are.
+Ersetze nun den `position`-Eigenschaftswert deines `.cat-head` durch `fixed`. Belasse `top` und `left` wie sie sind.
-After that, scroll up and down to see how the `fixed` value works.
+Scrolle danach nach oben und unten, um zu sehen, wie der `fixed`-Wert funktioniert.
# --hints--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md
index a7a70f95a81..899a81f65ef 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/649353647c44ef4867ab4935.md
@@ -1,6 +1,6 @@
---
id: 649353647c44ef4867ab4935
-title: Step 17
+title: Schritt 17
challengeType: 0
dashedName: step-17
---
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md
index 04963838659..36852345c77 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-intermediate-css-by-building-a-cat-painting/64a2687ef267e5934a2f93e3.md
@@ -1,35 +1,35 @@
---
id: 64a2687ef267e5934a2f93e3
-title: Step 59
+title: Schritt 59
challengeType: 0
dashedName: step-59
---
# --description--
-Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Give it a width of `30px`, a height of `50px`, and a border of `2px solid #000`.
+Using a descendant selector, select the two `div` elements inside the `div` with class `cat-mouth`. Weise ihm eine Breite von `30px`, eine Höhe von `50px` und einen Rand von `2px solid #000` zu.
# --hints--
-You should have a `.cat-mouth div` selector.
+Du solltest einen `.cat-mouth div`-Selektor haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div'))
```
-Your `.cat-mouth div` selector should have a `width` property set to `30px`.
+Dein `.cat-mouth div`-Selektor sollte eine `width`-Eigenschaft auf `30px` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.width === '30px')
```
-Your `.cat-mouth div` selector should have a `height` property set to `50px`.
+Dein `.cat-mouth div`-Selektor sollte eine `height`-Eigenschaft auf `50px` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.height === '50px')
```
-Your `.cat-mouth div` selector should have a `border` property set to `2px solid #000`.
+Dein `.cat-mouth div`-Selektor sollte eine `border`-Eigenschaft auf `2px solid #000` gesetzt haben.
```js
assert(new __helpers.CSSHelp(document).getStyle('.cat-mouth div')?.border === '2px solid rgb(0, 0, 0)')
diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 99f85ea995c..a9f7ed50996 100644
--- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ Accedi all'oggetto `myStorage` e assegna il contenuto della proprietà `glove bo
assert(gloveBoxContents === 'maps');
```
-Il tuo codice dovrebbe utilizzare la notazione a punti e parentesi per accedere a `myStorage`.
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
`gloveBoxContents` dovrebbe ancora essere dichiarata con `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 9367eea25be..9e288cdff9f 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-Ora è facile vedere che il testo è centrato all'interno dell'elemento `div`. Attualmente, la larghezza dell'elemento `div` è specificata in pixel (`px`). Cambia il valore della proprietà `width` in `80%`, per renderlo l'80% della larghezza del suo elemento genitore (`body`).
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-Dovresti assegnare alla proprietà `width` il valore `80%`.
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-Dovresti assegnare alla proprietà `width` il valore `300px`.
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index bc2e59a835f..40db4d41e6b 100644
--- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ ourStorage.desk.drawer;
assert(gloveBoxContents === 'maps');
```
-ドット記法とブラケット記法を使用して `myStorage` にアクセスする必要があります。
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
`gloveBoxContents` should still be declared with `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 624d5d64f35..8d94e1e0c63 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-これで `div` 要素内のテキストが中央に配置されているのが分かりやすくなりました。 今のところ、`div` 要素の幅はピクセル (`px`) で指定されています。 `width` プロパティの値を `80%` に変更し、幅が親要素 (`body`) の 80% となるようにしてください。
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-`width` プロパティを `80%` に設定する必要があります。
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-`width` プロパティが `300px` であってはいけません。
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 38a4ac7425e..40a1564560f 100644
--- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ Acesse o objeto `myStorage` e atribua o conteúdo da propriedade `glove box` par
assert(gloveBoxContents === 'maps');
```
-O código deve usar notação de ponto e de colchetes para acessar `myStorage`.
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
`gloveBoxContents` ainda deve ser declarada com `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 36f1e044298..c3e8588bec0 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-Agora é fácil ver que o texto está centrado dentro do elemento `div`. Atualmente, a largura do elemento `div` é especificada em pixels (`px`). Altere o valor da propriedade `width` para que seja `80%`, o que a tornará 80% da largura do seu elemento pai (`body`).
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-Você deve definir a propriedade `width` para `80%`.
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-Você não deve ter na propriedade `width` o valor de `300px`.
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Para mim, o freeCodeCamp é o máximo. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 9d0a1d503c5..e623722d560 100644
--- a/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/swahili/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ Access the `myStorage` object and assign the contents of the `glove box` propert
assert(gloveBoxContents === 'maps');
```
-Your code should use dot and bracket notation to access `myStorage`.
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
`gloveBoxContents` should still be declared with `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index d2713bd7c27..f157026fd26 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-Sasa ni rahisi kuona kwamba maandishi yamewekwa katikati ya kipengele cha `div`. Kwa sasa, upana wa kipengele cha `div` umebainishwa katika pikseli (`px`). Badilisha thamani ya sifa ya `width` kuwa `80%`, ili kuifanya 80% ya upana wa kipengele kikuu chake (`body`).
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-Unapaswa kuweka sifa ya `width` kuwa `80%`.
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-Hupaswi kuwa na sifa ya `width` ya `300px`.
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 87926a05400..c548d437212 100644
--- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ ourStorage.desk.drawer;
assert(gloveBoxContents === 'maps');
```
-Щоб отримати доступ до `myStorage`, використайте точкову та дужкову нотацію.
+Your code should use dot notation, where possible, to access `myStorage`.
```js
-assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+assert.match(code, /myStorage\.car\.inside/);
```
`gloveBoxContents` досі має бути оголошено з `const`.
```js
-assert.match(code, /const\s+gloveBoxContents\s*=/)
+assert.match(code, /const\s+gloveBoxContents\s*=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]|const\s*{\s*('|")glove box\2:\s*gloveBoxContents\s*}\s*=\s*myStorage\.car\.inside;/);
```
# --seed--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index b4a42633275..0c2b0a3b909 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -7,18 +7,20 @@ dashedName: step-24
# --description--
-Тепер легко побачити, що текст зцентрований всередині елемента `div`. Наразі ширина елемента `div` вказана в пікселях (`px`). Змініть значення властивості `width` на `80%`, щоб ширина батьківського елемента (`body`) була 80%.
+Now it's easy to see that the text is centered inside the `#menu` element. Currently, the width of the `#menu` element is specified in pixels (`px`).
+
+Change the `width` property's value to be `80%`, to make it 80% the width of its parent element (`body`).
# --hints--
-Ви повинні встановити властивість `width` на `80%`.
+You should set the `width` property to `80%`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
assert(hasWidth);
```
-Ви не повинні мати властивість `width` зі значенням `300px`.
+You should not have a `width` property of `300px`.
```js
const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
@@ -39,7 +41,7 @@ assert(!hasWidth);
- Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 Est. 2020 I think freeCodeCamp is great. I think freeCodeCamp is great. see more ]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index 5990515bc9d..31b1b47512b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
`div` 元素主要用於設計佈局,這與你迄今爲止使用的其他內容元素不同。 在 `body` 元素內添加一個 `div` 元素,然後將所有其他元素移到新的 `div` 內。
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-你應該有一個 `CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index 94cc0e4425f..d30998d1806 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
`div` 元素主要用于设计布局,这与你迄今为止使用的其他内容元素不同。 在 `body` 元素内添加一个 `div` 元素,然后将所有其他元素移到新的 `div` 内。
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-你应该有一个 `CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index ac07a0dd5ce..24fa531ca6d 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
El elemento `div` se utiliza principalmente para própositos de diseño a diferencia de los otros elementos de contenido que has usado hasta ahora. Añade un elemento `div` dentro del elemento `body` y luego mueve todos los demás elementos dentro del nuevo `div`.
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-Debes tener una etiqueta `CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index a8ce4ecdebc..8e6d9254662 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
Das `div`-Element wird im Gegensatz zu anderen Inhaltselementen, die du bisher verwendet hast, hauptsächlich für Layoutzwecke verwendet. Füge ein `div`-Element im `body`-Element hinzu und verschiebe dann alle anderen Elemente innerhalb des neuen `div`.
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-Du solltest einen einleitenden `CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index 5b741151fd3..5d2d6601c69 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
A differenza degli altri elementi di contenuto che hai utilizzato finora, l'elemento `div` è utilizzato principalmente per il design del layout. Aggiungi un elemento `div` all'interno dell'elemento `body` e poi sposta tutti gli altri elementi all'interno del nuovo elemento `div`.
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-Dovresti avere un tag di apertura `CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index ea9e069dc3e..6654a249440 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
`div` 要素はこれまで使用してきた他のコンテンツ要素とは異なり、主にレイアウトデザイン目的で使用されます。 `body` 要素内に `div` 要素を追加し、他のすべての要素を新しい `div` の中に移動させてください。
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-`CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index dbce9244bb3..febd6511419 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
Ao contrário dos outros elementos de conteúdo que você usou até agora, o elemento `div` é usado principalmente para fins de layout de design. Adicione um elemento `div` dentro do elemento `body` e, em seguida, mova todos os outros elementos dentro do novo `div`.
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-Você deve acrescentar uma tag de abertura `CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index 8ff18a66d89..b0546382424 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
Kipengele cha `div` hutumiwa hasa kwa madhumuni ya muundo, tofauti na vipengele vingine vya maudhui ambavyo umetumia kufikia sasa. Ongeza kipengele cha `div` ndani ya kipengele cha `body` kisha usogeze vipengele vingine vyote ndani ya `div` mpya.
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-Unapaswa kuwa na tagi ya kufungua ya `CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
CAMPER CAFE
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index 5681175b8f1..333ea28204c 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -9,33 +9,37 @@ dashedName: step-20
Переважно елемент `div` використовують для дизайну розкладки, на відміну від вже використаних вами елементів. Додайте елемент `div` всередині елемента `body`, а потім перемістіть всі інші елементи всередину нового `div`.
+Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
+
# --hints--
-Ви повинні мати початковий теґ `