From d18eae05899e5eb6e8c7e2064fd041efd7825a7d Mon Sep 17 00:00:00 2001
From: camperbot <camperbot@users.noreply.github.com>
Date: Wed, 6 Sep 2023 12:29:19 -0700
Subject: [PATCH] chore(i18n,learn): processed translations (#51494)

---
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../62dabe2ef403a12d5d295273.md               |  2 +-
 .../646c47867800472a4ed5d2ea.md               | 20 ++++++++--------
 .../646c5ace05e4be4211407935.md               | 12 +++++-----
 .../646c5d7057c45f432fcdd46c.md               | 12 +++++-----
 .../646c5ffef5598d449b52ec12.md               | 12 +++++-----
 .../646ceb843412c74edee27a79.md               | 10 ++++----
 .../646cf6cbca98e258da65c979.md               |  4 ++--
 .../646cfde6ac612e5d60391f50.md               |  4 ++--
 .../646dd7cfd0cfac630c1dd520.md               |  4 ++--
 .../646dd8c79ec23463a3d0e356.md               | 10 ++++----
 .../646ddb61ff08366570cc5902.md               | 12 +++++-----
 .../646f102bf87b350b593baa72.md               |  2 +-
 .../646f1764e2f1d212ba9785a7.md               |  8 +++----
 .../646f4d6c42dc5f214f4e7444.md               |  4 ++--
 .../6476fd4213318f6ee211028a.md               |  6 ++---
 .../649353647c44ef4867ab4935.md               |  2 +-
 .../64a2687ef267e5934a2f93e3.md               | 12 +++++-----
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 .../accessing-nested-objects.md               |  6 ++---
 .../5f356ed60785e1f3e9850b6e.md               | 12 ++++++----
 .../5f356ed60a5decd94ab66986.md               |  6 ++---
 .../5f356ed6199b0cdef1d2be8f.md               | 16 +++++++------
 .../5f356ed63c7807a4f1e6d054.md               | 24 +++++++++++++------
 .../5f356ed63e0fa262326eef05.md               | 10 ++++----
 .../5f356ed656a336993abd9f7c.md               | 12 +++++-----
 .../5f356ed69db0a491745e2bb6.md               | 10 ++++++--
 .../5f356ed6cf6eab5f15f5cfe6.md               | 14 +++++++----
 .../61410126fa3a6d2b3cda502e.md               |  8 ++++++-
 .../5dfa22d1b521be39a3de7be0.md               | 18 ++++++--------
 127 files changed, 878 insertions(+), 618 deletions(-)

diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
index 09ecea53378..0bcd89d2748 100644
--- a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -45,16 +45,16 @@ ourStorage.desk.drawer;
 assert(gloveBoxContents === 'maps');
 ```
 
-التعليمات البرمجية الخاص بك يجب أن يستخدم dot notation و bracket notation للوصول إلى `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/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 24d79f2c932..4ceff79545b 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/arabic/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%`، لجعلها 80% من عرض العنصر الحاوي لها (`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--
 
-يجب عليك تعيين خاصية `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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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) العناصر. <dfn>class selector</dfn> يتم تعريفه باسم مع نقطة مباشرة أمامه، مثل هذا:
+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 <dfn>class selector</dfn> 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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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 <dfn>id selector</dfn> 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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) الآتية `<div>`.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</div>`.
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-لا يجب عليك تغيير عنصر `body` الحالي. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-يجب أن تكون علامة `div` الخاصة بك متداخلة في `body`.
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index 92ef4c43b67..fe43bde0a10 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ dashedName: step-24
 يجب أن يكون لمنتقي `.cabin` الخاص بك الخاصية `animation` بقيمة `cabins 10s ease-in-out infinite`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index db98f1cad53..d940194e31d 100644
--- a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index bba6d4e1cdb..3d4b12c3512 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ CSS 中的註釋看起來像這樣：
 /* comment here */
 ```
 
-在你的樣式表中，註釋掉包含 `background-color` 屬性和值的行，這樣你就可以看到僅設置 `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)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 97e4b42917a..1ce8be98047 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-到目前爲止，你一直在使用類型選擇器來設置元素的樣式。 <dfn>class 選擇器</dfn>由前面帶有一個點的名稱定義，如下所示：
+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 <dfn>class selector</dfn> 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` 選擇器改爲類選擇器，用一個名爲 `menu` 的類代替 `div`。
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-你應該有一個 `.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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index 34742eb09bf..9523891cb92 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-現在的目標是使這個 `div` 不佔用整個頁面的寬度。 CSS 的 `width` 屬性在這方面是完美的。 在樣式表中創建一個新的類型選擇器，使你的 `div` 元素的寬度爲 `300px`。
+現在的目標是使這個 `div` 不佔用整個頁面的寬度。 CSS 的 `width` 屬性在這方面是完美的。
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-你應該有一個 `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 5867bd7a225..f77e6a7beb8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/chinese-traditional/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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index d67f2fcbfbd..158ac54c669 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/chinese-traditional/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 屬性，將 `div` 元素置於 `body` 元素的中心。
+Next, you want to center the `#menu` horizontally. 你可以通過把它的 `margin-left` 和 `margin-right` 屬性設置爲 `auto` 來做到這一點。 可以把頁邊距看作是元素周圍不可見的空間。 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);
 ```
 
-你應該把你的 `div` 的 `margin-left` 和 `margin-right` 屬性設置爲 `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index b73aa618309..f8095a2e487 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-要將該類的樣式應用於 `div` 元素，請在 `div` 元素的開始標籤上添加一個 `class` 屬性，並將其值設置爲 `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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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--
 
-你應該有一個 `<div>` 開始標籤。
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-你應該有一個 `</div>` 結束標籤。
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-你不應該改變你現有的 `body` 元素。 確認你沒有刪除結束標籤。
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-你的 `div` 元素應該嵌套在你的 `body` 元素中。
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index aacd7063fc6..53790d0156d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ dashedName: step-24
 你的 `.cabin` 選擇器應該有一個 `animation` 屬性值爲 `cabins 10s ease-in-out infinite`。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index d375b943701..1bde2824098 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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
 你應該在 `p` 元素中嵌套一個新的錨點（`a`）元素。
 
 ```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, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 0d9f1ece471..11b806b216a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ CSS 中的注释看起来像这样：
 /* comment here */
 ```
 
-在你的样式表中，注释掉包含 `background-color` 属性和值的行，这样你就可以看到仅设置 `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)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index b1135fd581d..160f9539474 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-到目前为止，你一直在使用类型选择器来设置元素的样式。 <dfn>class 选择器</dfn>由前面带有一个点的名称定义，如下所示：
+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 <dfn>class selector</dfn> 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` 选择器改为类选择器，用一个名为 `menu` 的类代替 `div`。
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-你应该有一个 `.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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index 9d92b7cc6f2..0f8df87677b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-现在的目标是使这个 `div` 不占用整个页面的宽度。 CSS 的 `width` 属性在这方面是完美的。 在样式表中创建一个新的类型选择器，使你的 `div` 元素的宽度为 `300px`。
+现在的目标是使这个 `div` 不占用整个页面的宽度。 CSS 的 `width` 属性在这方面是完美的。
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-你应该有一个 `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index b0d4c8e1f07..433ccc4b870 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/chinese/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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index af83ff51b3f..ef2d6e0d326 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/chinese/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 属性，将 `div` 元素置于 `body` 元素的中心。
+Next, you want to center the `#menu` horizontally. 你可以通过把它的 `margin-left` 和 `margin-right` 属性设置为 `auto` 来做到这一点。 可以把页边距看作是元素周围不可见的空间。 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);
 ```
 
-你应该把你的 `div` 的 `margin-left` 和 `margin-right` 属性设置为 `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 25b9747c328..9e69c1d7698 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-要将该类的样式应用于 `div` 元素，请在 `div` 元素的开始标签上添加一个 `class` 属性，并将其值设置为 `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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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--
 
-你应该有一个 `<div>` 开始标签。
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-你应该有一个 `</div>` 结束标签。
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-你不应该改变你现有的 `body` 元素。 确认你没有删除结束标签。
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-你的 `div` 元素应该嵌套在你的 `body` 元素中。
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index 0f696406043..8035536f3b4 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ dashedName: step-24
 你的 `.cabin` 选择器应该有一个 `animation` 属性值为 `cabins 10s ease-in-out infinite`。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 3b18dd903c4..193cd2f5b20 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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
 你应该在 `p` 元素中嵌套一个新的锚点（`a`）元素。
 
 ```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, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 94257a7eea8..873cdddaaaf 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ Los comentarios en CSS se ven así:
 /* comment here */
 ```
 
-En tu hoja de estilos, convierte a un comentario la línea con el valor y la propiedad `background-color`, así podrás ver el efecto de solo darle estilo al elemento `div`. Esto hará que el fondo vuelva a ser blanco.
+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. Esto hará que el fondo vuelva a ser blanco.
 
 # --hints--
 
@@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 84bdc44626a..5f11f3b4500 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-Hasta ahora has estado usando selectores de tipo para darle estilo a los elementos. Un <dfn>selector de clase</dfn> (class selector) se define con un punto e inmediatamente después un nombre, de esta forma:
+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 <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
 
 ```css
 .class-name {
@@ -15,21 +17,21 @@ Hasta ahora has estado usando selectores de tipo para darle estilo a los element
 }
 ```
 
-Cambia el selector `div` existente a un selector de clase, reemplazando `div` por una clase llamada `menu`.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-Debes tener un selector de clase `.menu`.
+You should have a `.menu` class selector.
 
 ```js
 const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
 assert(hasMenu);
 ```
 
-No debes tener un selector `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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index 70d7a7a3952..b653a91de55 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-El objetivo ahora, es hacer que él `div` no ocupe todo el ancho de la página. La propiedad CSS `width`, es perfecta para esto. Crea un nuevo selector de tipo en la hoja de estilos que le dé a tu elemento `div` un ancho dé `300px` utilizando la propiedad width.
+El objetivo ahora, es hacer que él `div` no ocupe todo el ancho de la página. La propiedad CSS `width`, es perfecta para esto.
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-Debes tener un selector de tipo `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);
 ```
 
-La propiedad `width` debe tener el valor `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);
 ```
 
-Tu elemento `div` debe tener un ancho de 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index a7df8042717..c4109fb58e1 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -7,7 +7,7 @@ dashedName: step-23
 
 # --description--
 
-Ahora utiliza el selector `div` existente, para darle un color de fondo `burlywood` al elemento `div`.
+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);
 ```
 
-Tu elemento `div` debe tener un color de fondo 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 974f7192b66..3dec94adac0 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -7,7 +7,7 @@ dashedName: step-25
 
 # --description--
 
-Ahora centraremos horizontalmente él `div`. Puedes hacer esto, dándole el valor `auto` a las propiedades `margin-left` y `margin-right` (margen-izquierdo y margen-derecho). Piensa en el margen como un espacio invisible alrededor de un elemento. Usando estas dos propiedades de margen, centra el elemento `div` dentro del elemento `body`.
+Next, you want to center the `#menu` horizontally. Puedes hacer esto, dándole el valor `auto` a las propiedades `margin-left` y `margin-right` (margen-izquierdo y margen-derecho). Piensa en el margen como un espacio invisible alrededor de un elemento. 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);
 ```
 
-Debes darle el valor `auto` a las propiedades `margin-left` y `margin-right` del elemento `div`.
+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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index e23efb81f61..8d852934017 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Para aplicar el estilo al elemento `div`, añade un atributo `class` al elemento `div` con el valor `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 @@ Tu elemento `div` debe tener un atributo class (clase) con el valor `menu`.
 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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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 `<div>` de apertura.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-Debes tener una etiqueta `</div>` de cierre.
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-No debes modificar el elemento `body` existente. Asegúrate de que no eliminaste la etiqueta de cierre.
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-Tu etiqueta `div` debe estar anidada dentro del elemento `body`.
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index 85314877332..3c542346b25 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ Reemplaza `linear` a `ease-in-out` en el selector `.cabin`.
 Tu selector `.cabin` debe tener la propiedad `animation` establecida en `cabins 10s ease-in-out infinite`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index d51f09e39ff..1147b164cb5 100644
--- a/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/espanol/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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
 Deberías anidar un nuevo elemento (`a`) dentro del elemento `p`.
 
 ```js
-assert($('p > a').length);
+const nestedAnchor = document.querySelector(`p > a`);
+assert.isNotNull(nestedAnchor)
 ```
 
 El valor del enlace `href` debe ser `https://freecatphotoapp.com`. Has omitido el valor `href` o tienes un error tipográfico.
 
 ```js
-const nestedAnchor = $('p > a')[0];
 assert(
-  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
+  document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
 );
 ```
 
 El texto del enlace debe ser `cat photos`. Has omitido el texto o tienes un error de escritura.
 
 ```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(
 Después de anidar el elemento anchor (`a`), el único contenido del elemento `p` visible en el navegador debe ser `See more cat photos in our gallery.` Verifique el texto, el espaciado o la puntuación tanto del elemento `p` como del elemento de anclaje anidado.
 
 ```js
-const pText = document
-  .querySelector('p')
-  .innerText.toLowerCase()
-  .replace(/\s+/g, ' ');
-assert(pText.match(/see more cat photos in our gallery\.?$/));
+assert.match(code, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 5c28711507c..f5a95fcb0b2 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ Kommentare in CSS sehen wie folgt aus:
 /* comment here */
 ```
 
-Schreibe in deinem Stylesheet die Zeile mit der `background-color`- Eigenschaft und dem Wert aus, damit du die Wirkung des einzigen `div`-Stilelements sehen kannst. Dadurch wird der Hintergrund wieder weiß.
+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. Dadurch wird der Hintergrund wieder weiß.
 
 # --hints--
 
@@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 583f94f3de2..ba58b02f193 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-Bisher hast du Typ-Selektoren für verschiedene Style-Elemente verwendet. Ein <dfn>class selector</dfn> ist durch einen Namen mit einem Punkt definiert, der sich direkt vor ihm befindet, wie folgendes Beispiel:
+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 <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
 
 ```css
 .class-name {
@@ -15,21 +17,21 @@ Bisher hast du Typ-Selektoren für verschiedene Style-Elemente verwendet. Ein <d
 }
 ```
 
-Ändere den vorhandenen `div`-Selektor in einen Klassen-Selektor, indem `div` durch eine Klasse namens `menu` ersetzt wird.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-Du solltest einen `.menu` Klassen-Selektor haben.
+You should have a `.menu` class selector.
 
 ```js
 const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
 assert(hasMenu);
 ```
 
-Du solltest keinen `div` Selektor haben.
+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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index 8116fe5479a..dd626bb921a 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-Jetzt wollen wir, dass `div` nicht die gesamte Breite der Seite in Anspruch nimmt. Die CSS `width`-Eigenschaft ist dafür perfekt geeignet. Erstelle einen neuen Typselektor im Stylesheet, der deinem `div`-Element eine Breite von `300px` gibt.
+Jetzt wollen wir, dass `div` nicht die gesamte Breite der Seite in Anspruch nimmt. Die CSS `width`-Eigenschaft ist dafür perfekt geeignet.
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-Du solltest einen `div`-Typselektor haben.
+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);
 ```
 
-Du solltest die `width`-Eigenschaft auf `300px` setzen.
+You should set the `width` property to `300px`.
 
 ```js
 const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
 assert(hasWidth);
 ```
 
-Dein `div` sollte eine Breite von 300px haben.
+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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 67eb7bd9a75..d3403096f7b 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -7,7 +7,7 @@ dashedName: step-23
 
 # --description--
 
-Benutze jetzt den `div`-Selektor, um die Hintergrundfarbe des `div`-Elements auf `burlywood` zu setzen.
+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);
 ```
 
-Dein `div` sollte einen "burlywood" Hintergrund haben.
+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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 9525455c6f0..6b368f27843 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -7,7 +7,7 @@ dashedName: step-25
 
 # --description--
 
-Als nächstes möchtest du den `div` horizontal zentrieren. Dies kannst du tun, indem du `margin-left`- und `margin-right`-Eigenschaften auf `auto` einstellst. Stelle dir den Rand als einen unsichtbaren Raum um ein Element herum vor. Mit diesen beiden Rand-Eigenschaften zentrierst du das `div` Element innerhalb des `body` Elements.
+Next, you want to center the `#menu` horizontally. Dies kannst du tun, indem du `margin-left`- und `margin-right`-Eigenschaften auf `auto` einstellst. Stelle dir den Rand als einen unsichtbaren Raum um ein Element herum vor. 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);
 ```
 
-Du solltest die `margin-left` und `margin-right` Eigenschaften in deinem `div` auf `auto` setzen.
+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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 109843ed1a9..6d4b972e6a6 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Füge, um den Stil der Klasse auf das `div`-Element anzuwenden, ein `class`-Attribut zum Öffnungstag des `div`-Elements hinzu und setze seinen Wert auf `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 @@ Dein `div`-Element sollte die `menu`-Klasse besitzen.
 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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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 `<div>`-Tag haben.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-Du solltest ein abschließendes `</div>`-Tag haben.
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-Du solltest dein vorhandenes `body`-Element nicht verändern. Stelle sicher, dass du das abschließende Tag nicht gelöscht hast.
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-Dein `div`-Tag sollte innerhalb deines `body`-Elements verschachtelt sein.
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index 273c6c99797..86d274150d6 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ Ersetze im `.cabin`-Selektor `linear` mit `ease-in-out`.
 Dein `.cabin`-Selektor sollte eine `animation`-Eigenschaft auf `cabins 10s ease-in-out infinite` gesetzt haben.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 5d82c539398..9267120a4ac 100644
--- a/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/german/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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
 Du solltest ein neues Anker-Element (`a`) innerhalb des `p`-Elements einbetten.
 
 ```js
-assert($('p > a').length);
+const nestedAnchor = document.querySelector(`p > a`);
+assert.isNotNull(nestedAnchor)
 ```
 
 Der `href`-Wert des Links sollte `https://freecatphotoapp.com` sein. Du hast entweder den `href`-Wert weggelassen oder einen Tippfehler gemacht.
 
 ```js
-const nestedAnchor = $('p > a')[0];
 assert(
-  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
+  document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
 );
 ```
 
 Der Linktext sollte `cat photos` sein. Du hast entweder den Text weggelassen oder einen Tippfehler gemacht.
 
 ```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(
 Nachdem das (`a`)-Ankerelement eingebettet wurde, sollte der einzige sichtbare `p`-Elementinhalt im Browser `See more cat photos in our gallery.` sein. Überprüfe den Text, die Abstände oder die Satzzeichen des `p`s und des eingebetteten Ankerelements.
 
 ```js
-const pText = document
-  .querySelector('p')
-  .innerText.toLowerCase()
-  .replace(/\s+/g, ' ');
-assert(pText.match(/see more cat photos in our gallery\.?$/));
+assert.match(code, /<p>see more <a[^>]*>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(/<!DOCTYPE html>/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*<!DOCTYPE\s+html\s*>/i));
@@ -29,37 +29,37 @@ You should have an opening `html` tag with a `lang` attribute of `en`.
 assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/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(/<head>/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(/<body>/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(/<head>\s*<\/head>\s*<body>\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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index ab55eae41ce..b1a9d9ed10e 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ I commenti in CSS hanno quest'aspetto:
 /* comment here */
 ```
 
-Nel foglio di stile, trasforma in un commento la riga contenente la proprietà `background-color` e il suo valore, in modo da poter vedere l'effetto dello stile del solo elemento `div`. In questo modo lo sfondo tornerà bianco di nuovo.
+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. In questo modo lo sfondo tornerà bianco di nuovo.
 
 # --hints--
 
@@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 0c93ad113a1..fc59cd12445 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-Finora hai usato dei selettori di tipo per gli elementi di stile. Un <dfn>selettore di classe</dfn> viene definito da un nome preceduto da un punto, in questo modo:
+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 <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
 
 ```css
 .class-name {
@@ -15,21 +17,21 @@ Finora hai usato dei selettori di tipo per gli elementi di stile. Un <dfn>selett
 }
 ```
 
-Cambia il selettore `div` esistente in un selettore di classe sostituendo `div` con una classe chiamata `menu`.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-Dovresti avere un selettore di classe `.menu`.
+You should have a `.menu` class selector.
 
 ```js
 const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
 assert(hasMenu);
 ```
 
-Non dovresti avere un selettore `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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index c4dfe548194..1dfa3674a0e 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-Adesso, l'obiettivo è far sì che `div` non occupi l'intera larghezza della pagina. La proprietà CSS `width` è perfetta per questo. Crea un nuovo selettore di tipo nel foglio di stile che dà al tuo elemento `div` una larghezza di `300px`.
+Adesso, l'obiettivo è far sì che `div` non occupi l'intera larghezza della pagina. La proprietà CSS `width` è perfetta per questo.
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-Dovresti avere un selettore di tipo `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);
 ```
 
-Dovresti assegnare alla proprietà `width` il valore `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` dovrebbe avere una larghezza di 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 1b508b35964..d9f297fa946 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -7,7 +7,7 @@ dashedName: step-23
 
 # --description--
 
-Adesso usa il selettore `div` esistente per impostare il colore di sfondo dell'elemento `div` su `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` dovrebbe avere uno sfondo 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index dc3b0a00b40..fd628c6a5e9 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -7,7 +7,7 @@ dashedName: step-25
 
 # --description--
 
-Il prossimo passo è centrare `div` orizzontalmente. Puoi farlo assegnando alle sue proprietà `margin-left` e `margin-right` il valore `auto`. Pensa al margine come spazio invisibile attorno a un elemento. Utilizzando queste due proprietà dei margini, centra l'elemento `div` all'interno dell'elemento `body`.
+Next, you want to center the `#menu` horizontally. Puoi farlo assegnando alle sue proprietà `margin-left` e `margin-right` il valore `auto`. Pensa al margine come spazio invisibile attorno a un elemento. 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);
 ```
 
-Dovresti assegnare alle proprietà `margin-left` e `margin-right` di `div` il valore `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 533a84280cc..6096192ecbc 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Per applicare lo stile della classe all'elemento `div`, aggiungi un attributo `class` al tag di apertura dell'elemento `div` e assegnagli il valore `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 @@ L'elemento `div` dovrebbe avere la classe `menu`.
 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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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 `<div>`.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-Dovresti avere un tag di chiusura `</div>`.
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-Non dovresti cambiare l'elemento `body` esistente. Assicurati di non aver eliminato il tag di chiusura.
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-Il tag `div` dovrebbe essere annidato nell'elemento `body`.
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index 914137136c4..f41c56a8e80 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ Sostituisci `linear` con `ease-in-out` nel selettore `.cabin`.
 Il selettore `.cabin` dovrebbe avere una proprietà `animation` impostata su `cabins 10s ease-in-out infinite`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 13780c3c1e3..2c40d8a6f08 100644
--- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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
 Dovresti annidare un nuovo elemento di ancoraggio (`a`) dentro l'elemento `p`.
 
 ```js
-assert($('p > a').length);
+const nestedAnchor = document.querySelector(`p > a`);
+assert.isNotNull(nestedAnchor)
 ```
 
 Il valore dell'attributo `href` del link dovrebbe essere `https://freecatphotoapp.com`. Hai omesso il valore di `href` o hai un refuso.
 
 ```js
-const nestedAnchor = $('p > a')[0];
 assert(
-  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
+  document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
 );
 ```
 
 Il testo del link dovrebbe essere `cat photos`. Hai omesso il testo o hai un refuso.
 
 ```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(
 Dopo aver annidato l'elemento di ancoraggio (`a`), l'unico contenuto dell'elemento `p` visibile nel browser dovrebbe essere `See more cat photos in our gallery.` Controlla il testo, la spaziatura o la punteggiatura, sia dell'elemento `p` che dell'elemento di ancoraggio annidato.
 
 ```js
-const pText = document
-  .querySelector('p')
-  .innerText.toLowerCase()
-  .replace(/\s+/g, ' ');
-assert(pText.match(/see more cat photos in our gallery\.?$/));
+assert.match(code, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 3da84385ddf..9667040633f 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ CSS のコメントは以下のようになります:
 /* comment here */
 ```
 
-スタイルシート内の `background-color` プロパティとその値を含む行をコメントアウトすることで、`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)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 3486cf98d09..1b183af6cf5 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-ここまでは要素型セレクターを使用して要素にスタイルを適用してきました。 <dfn>クラスセレクター</dfn>は、次のようにクラス名の前にドットをつけることで定義されます:
+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 <dfn>class selector</dfn> 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` を `menu` という名前のクラスと置き換えて、既存の `div` セレクターをクラスセレクターに変更してください。
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-`.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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index c4ce0bb496e..2e84025df18 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-次の目標は、`div` がページの幅全体に広がらないようにすることです。 そうするには CSS の `width` プロパティが最適です。 スタイルシート内に新しい要素型セレクターを作成して、`div` 要素の幅を `300px` にしてください。
+次の目標は、`div` がページの幅全体に広がらないようにすることです。 そうするには CSS の `width` プロパティが最適です。
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-`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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 6fc408df64b..9b6d473aa05 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/japanese/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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 2255988b8ce..747c4e80e82 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/japanese/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` に設定してください。 マージンとは、要素の周りの見えないスペースだと考えてください。 これら 2 つのマージンプロパティを使用して、`div` 要素を `body` 要素内の中央に配置してください。
+Next, you want to center the `#menu` horizontally. そうするには `margin-left` と `margin-right` プロパティを `auto` に設定してください。 マージンとは、要素の周りの見えないスペースだと考えてください。 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);
 ```
 
-`div` の `margin-left` プロパティと `margin-right` プロパティを `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 36e6a501bd9..b64f247d26c 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/japanese/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` 属性を `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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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--
 
-`<div>` の開始タグが 1 つ必要です。
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-終了タグ `</div>` が 1 つ必要です。
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-既存の `body` 要素を変更しないようにしてください。 終了タグを削除していないか確認してください。
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-`div` タグは `body` の中にネストされている必要があります。
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index 16e9d998469..81426ed39a2 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ dashedName: step-24
 `.cabin` セレクターの `animation` プロパティを `cabins 10s ease-in-out infinite` に設定する必要があります。
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index e33cd53748e..cdd71cb5c3f 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 6fd987cca95..70c61a27eb6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ Comentários em CSS têm esta aparência:
 /* comment here */
 ```
 
-Na sua folha de estilo, comente a linha que contém a propriedade e valor do `background-color`, para poder ver o efeito de estilizar apenas o elemento `div`. Isto tornará o fundo branco de novo.
+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. Isto tornará o fundo branco de novo.
 
 # --hints--
 
@@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index fe075a93529..c216ff1fd63 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-Até agora, você tem usado seletores de tipo para elementos de estilo. Um <dfn>seletor de classe</dfn> é definido por um nome com um ponto diretamente na frente dele, como este:
+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 <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
 
 ```css
 .class-name {
@@ -15,21 +17,21 @@ Até agora, você tem usado seletores de tipo para elementos de estilo. Um <dfn>
 }
 ```
 
-Altere o seletor `div` existente para um seletor de classe substituindo `div` por uma classe chamada `menu`.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-Você deve usar um seletor de classe `.menu`.
+You should have a `.menu` class selector.
 
 ```js
 const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
 assert(hasMenu);
 ```
 
-Você não deve ter um seletor `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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index 14d1348a6a8..7b15d884bc6 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-Agora o objetivo é fazer a `div` não ocupar toda a largura da página. A propriedade CSS `width` é perfeita para isso. Crie um novo seletor de tipo na folha de estilo que dá ao seu elemento `div` uma largura de `300px`.
+Agora o objetivo é fazer a `div` não ocupar toda a largura da página. A propriedade CSS `width` é perfeita para isso.
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-Você deve usar um seletor de tipo `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);
 ```
 
-Você deve definir a propriedade `width` para `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);
 ```
 
-A `div` deve ter uma largura de 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index fecafed96d0..5850a042ab3 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -7,7 +7,7 @@ dashedName: step-23
 
 # --description--
 
-Agora, use o seletor `div` existente para definir a cor de fundo do elemento `div` para que seja `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);
 ```
 
-O elemento `div` deve ter um fundo de cor amadeirada.
+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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 7a5accccadc..17e86d9a1f8 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -7,7 +7,7 @@ dashedName: step-25
 
 # --description--
 
-Em seguida, centralize a `div` horizontalmente. Você pode fazer isso definindo as propriedades `margin-left` e `margin-right` como `auto`. Pense na margem como um espaço invisível em torno de um elemento. Usando essas duas propriedades de margem, centralize o elemento `div` dentro do elemento `body`.
+Next, you want to center the `#menu` horizontally. Você pode fazer isso definindo as propriedades `margin-left` e `margin-right` como `auto`. Pense na margem como um espaço invisível em torno de um elemento. 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);
 ```
 
-Você deve definir as propriedades `margin-left` e `margin-right` do elemento `div` para `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index e9de93fc2b7..eb32884de32 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Para aplicar a estilização de classe ao elemento `div`, adicionar um atributo `class` à tag de abertura do elemento `div` e defina seu valor para `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 @@ O elemento `div` deve ter a classe `menu`.
 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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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 `<div>`.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-Você deve acrescentar uma tag de fechamento `</div>`.
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-Você deve manter o elemento `body` preexistente. Verifique se você não excluiu a tag de fechamento.
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-O elemento `div` deve estar dentro do elemento `body`.
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index 601cb3f6e6b..4e82871792d 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ No seletor `.cabin` substitua `linear` por `ease-in-out`.
 O seletor `.cabin` deve ter a propriedade `animation` definida para `cabins 10s ease-in-out infinite`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 8732c3f0768..7357e0b854c 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 Você pode transformar qualquer texto em um link, como o texto dentro de um elemento `p`.
 
 ``` html
-<p>Para mim, o <a href="https://www.freecodecamp.org/">freeCodeCamp</a> é o máximo.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-No texto do elemento `p`, transforme as palavras `cat photos` em um link adicionando as tags de abertura e fechamento de um elemento de âncora (`a`) ao redor dessas palavras. Em seguida, defina o valor do atributo `href` como `https://freecatphotoapp.com/`
+No texto do elemento `p`, transforme as palavras `cat photos` em um link adicionando as tags de abertura e fechamento de um elemento de âncora (`a`) ao redor dessas palavras. Then set the `href` attribute to `https://freecatphotoapp.com`
 
 
 # --hints--
@@ -21,22 +21,22 @@ No texto do elemento `p`, transforme as palavras `cat photos` em um link adicion
 Você deve colocar um novo elemento de âncora (`a`) dentro de cada elemento `p`.
 
 ```js
-assert($('p > a').length);
+const nestedAnchor = document.querySelector(`p > a`);
+assert.isNotNull(nestedAnchor)
 ```
 
 O valor de `href` do link deve ser `https://freecatphotoapp.com`. Você omitiu o valor de `href` ou tem um erro de digitação.
 
 ```js
-const nestedAnchor = $('p > a')[0];
 assert(
-  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
+  document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
 );
 ```
 
 O texto do link deve ser `cat photos`. Você omitiu o texto ou tem um erro de digitação.
 
 ```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(
 Após aninhar o elemento de âncora (`a`), o único conteúdo do elemento `p` visível no navegador deve ser `See more cat photos in our gallery.` Verifique o texto novamente em termos de espaçamento e pontuação, tanto do elemento `p` quanto do elemento de âncora aninhado.
 
 ```js
-const pText = document
-  .querySelector('p')
-  .innerText.toLowerCase()
-  .replace(/\s+/g, ' ');
-assert(pText.match(/see more cat photos in our gallery\.?$/));
+assert.match(code, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index a1b962658f1..0fa320c4370 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ Maoni katika CSS yanaonekana hivi:
 /* comment here */
 ```
 
-Katika laha lako la mtindo, toa maoni kwenye mstari ulio na kipengele na thamani ya `background-color`, ili uweze kuona athari ya kipengele cha kuweka `div` pekee. Hii itafanya mandharinyuma kuwa nyeupe tena.
+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. Hii itafanya mandharinyuma kuwa nyeupe tena.
 
 # --hints--
 
@@ -46,7 +46,7 @@ assert(bodyCSS === "rgba(0, 0, 0, 0)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 8600fbbabf8..45a05edd455 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-Kufikia sasa umekuwa ukitumia vichaguzi vya aina kuweka mtindo kwa vipengee. <dfn>class selecto</dfn> inafafanuliwa kwa jina lililo na nukta moja kwa moja mbele yake, kama hii:
+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 <dfn>class selector</dfn> is defined by a name with a dot directly in front of it, like this:
 
 ```css
 .class-name {
@@ -15,21 +17,21 @@ Kufikia sasa umekuwa ukitumia vichaguzi vya aina kuweka mtindo kwa vipengee. <df
 }
 ```
 
-Badilisha kichaguzi kilichopo cha `div` kuwa kiteuzi cha darasa kwa kubadilisha `div` na class inayoitwa `menu`.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-Unapaswa kuwa na kichaguzi cha `.menu`.
+You should have a `.menu` class selector.
 
 ```js
 const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
 assert(hasMenu);
 ```
 
-Hupaswi kuwa na kichaguzi cha `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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index a31469cbe8d..eb0a7b59168 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-Lengo sasa ni kufanya `div` isichukue upana mzima wa ukurasa. Sifa ya CSS `width` inafaa kwa hili. Unda kichaguzi kipya cha aina katika laha ya mtindo inayoipa kipengele chako cha `div` upana wa `300px`.
+Lengo sasa ni kufanya `div` isichukue upana mzima wa ukurasa. Sifa ya CSS `width` inafaa kwa hili.
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-Unapaswa kuwa na kichaguzi cha `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);
 ```
 
-Unapaswa kuweka sifa ya `width` kuwa `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` yako inapaswa kuwa na upana wa 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 80c9b5ddc2d..0251e40e566 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -7,7 +7,7 @@ dashedName: step-23
 
 # --description--
 
-Sasa tumia kichaguzi cha `div` kilichopo ili kuweka rangi ya usuli ya kipengele cha `div` kuwa `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` yako inapaswa kuwa na usuli wa 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index f88d2670565..679759c35d9 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -7,7 +7,7 @@ dashedName: step-25
 
 # --description--
 
-Kisha, ungependa kuweka `div` katikati kwa mlalo. Unaweza kufanya hivi kwa kuweka sifa za `margin-left` na `margin-right` kuwa `auto`. Fikiria ukingo kama nafasi isiyoonekana karibu na kipengele. Kwa kutumia sifa hizi mbili za ukingo, weka katikati ya kipengele cha `div` ndani ya kipengele cha `body`.
+Next, you want to center the `#menu` horizontally. Unaweza kufanya hivi kwa kuweka sifa za `margin-left` na `margin-right` kuwa `auto`. Fikiria ukingo kama nafasi isiyoonekana karibu na kipengele. 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);
 ```
 
-Unapaswa kuweka sifa za `margin-left` na `margin-right` za `div` yako kuwa `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index d5ee9c3ef67..e3794455258 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -7,7 +7,7 @@ dashedName: step-27
 
 # --description--
 
-Ili kutumia mtindo wa class kwenye kipengele cha `div`, ongeza sifa ya `class` kwenye tagi ya ufunguzi ya kipengele cha `div` na uweke thamani yake kuwa `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 @@ Kipengele chako cha `div` kinapaswa kuwa na class ya `menu`.
 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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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 `<div>`.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-Unapaswa kuwa na tagi ya kufunga ya `</div>`.
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-Hupaswi kubadilisha kipengele chako cha `body` kilichopo. Hakikisha kuwa hukufuta tagi ya kufunga.
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-Tagi yako ya `div` inapaswa kuwa ndani ya `body`.
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index b9385126673..1dbcbb9f61a 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ Badilisha `linear` kuwa `ease-in-out` katika kichaguzi cha `.cabin`.
 Kichaguzi chako cha `.cabin` kinafaa kuwa na sifa ya `animation` iliyowekwa kuwa `cabins 10s ease-in-out infinite`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index ccb613e4897..093942a603a 100644
--- a/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/swahili/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 You can turn any text into a link, such as the text inside of a `p` element.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-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
 Unapaswa kuweka kipengee kipya cha (`a`) ndani ya kipengele cha `p`.
 
 ```js
-assert($('p > a').length);
+const nestedAnchor = document.querySelector(`p > a`);
+assert.isNotNull(nestedAnchor)
 ```
 
 Thamani ya `href` ya kiungo inapaswa kuwa `https://freecatphotoapp.com`. Umeacha thamani ya `href` au umeandika makosa.
 
 ```js
-const nestedAnchor = $('p > a')[0];
 assert(
-  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
+  document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
 );
 ```
 
 Maandishi ya kiungo yanapaswa kuwa `cat photos`. Aidha umesahau maandishi, au kuna makosa ya herufi.
 
 ```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(
 Baada ya kuweka kipengee cha nanga (`a`), kipengele pekee cha `p` kinachoonekana kwenye kivinjari kinapaswa kuwa `See more cat photos in our gallery.` Mara mbili angalia maandishi, nafasi, au uakifishaji wa `p` na kipengele cha nanga kilichowekwa.
 
 ```js
-const pText = document
-  .querySelector('p')
-  .innerText.toLowerCase()
-  .replace(/\s+/g, ' ');
-assert(pText.match(/see more cat photos in our gallery\.?$/));
+assert.match(code, /<p>see more <a[^>]*>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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 60d44d66e99..8ff23e42efd 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -14,7 +14,7 @@ dashedName: step-22
 /* comment here */
 ```
 
-В аркуші стилів прокоментуйте лінію, яка містить властивість `background-color` зі значенням, щоб був помітний ефект від стилізації лише елемента `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)")
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -70,7 +70,7 @@ h1, h2, p {
   text-align: center;
 }
 
-div {
+#menu {
   width: 300px;
 }
 ```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 40423f91fc0..f316f536203 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -7,7 +7,9 @@ dashedName: step-26
 
 # --description--
 
-До цього часу для стилізації елементів ви використовували лише селектори типу. <dfn>Селектор класу</dfn> визначається за назвою з крапкою одразу перед нею, наприклад:
+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 <dfn>class selector</dfn> 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` на селектор класу, змінюючи `div` на клас `menu`.
+Change the existing `#menu` selector into a class selector by replacing `#menu` with a class named `.menu`.
 
 # --hints--
 
-Ви повинні мати селектор класу `.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);
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -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/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index c5acff84e59..d08551462e1 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -7,28 +7,38 @@ dashedName: step-21
 
 # --description--
 
-Тепер метою є зробити так, щоб `div` не займав всю ширину сторінки. CSS властивість `width` чудово підходить для цього. Створіть новий селектор типу в таблиці стилів, що надає елементу `div` ширину зі значенням `300px`.
+Тепер метою є зробити так, щоб `div` не займав всю ширину сторінки. CSS властивість `width` чудово підходить для цього.
+
+You can use the `id` selector to target a specific `div` element. An <dfn>id selector</dfn> 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--
 
-Ви повинні мати селектор типу `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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 63ef8d38e7e..eaa9b06b095 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/ukrainian/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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -64,7 +64,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 300px;
 }
 --fcc-editable-region--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 854cdd1d024..6e1400f6507 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/ukrainian/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`. Думайте про поле як невидимий простір навколо елементу. Використовуючи ці дві властивості, зцентруйте елемент `div` в межах елемента `body`.
+Next, you want to center the `#menu` horizontally. Це можна зробити, встановивши властивості `margin-left` та `margin-right` на `auto`. Думайте про поле як невидимий простір навколо елементу. 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');
     <link href="styles.css" rel="stylesheet"/>
   </head>
   <body>
-    <div>
+    <div id="menu">
       <main>
         <h1>CAMPER CAFE</h1>
         <p>Est. 2020</p>
@@ -73,7 +73,7 @@ h1, h2, p {
 }
 
 --fcc-editable-region--
-div {
+#menu {
   width: 80%;
   background-color: burlywood;
 }
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 4031b14d72f..1a96b57d1ae 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/ukrainian/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` до початкового теґа елемента `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'));
   </head>
   <body>
 --fcc-editable-region--
-    <div>
+    <div id="menu">
 --fcc-editable-region--
       <main>
         <h1>CAMPER CAFE</h1>
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--
 
-Ви повинні мати початковий теґ `<div>`.
+Your opening `<div>` tag should have an `id` attribute set to `menu`.
 
 ```js
-assert(code.match(/<div>/i));
+const div = $('div')[0];
+assert(div.id === 'menu');
 ```
 
-Ви повинні мати кінцевий теґ `</div>`.
+You should have a closing `</div>` tag.
 
 ```js
 assert(code.match(/<\/div>/i));
 ```
 
-Ви не повинні змінювати наявний елемент `body`. Переконайтеся, що не видалили кінцевий теґ.
+You should not change your existing `body` element. Make sure you did not delete the closing tag.
 
 ```js
 assert($('body').length === 1);
 ```
 
-Ваш теґ `div` повинен бути вкладеним в `body`.
+Your `div` tag should be nested in the `body`.
 
 ```js
 const div = $('div')[0];
 assert(div.parentElement.tagName === 'BODY');
 ```
 
+
 # --seed--
 
 ## --seed-contents--
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
index fa496cda2f1..daa82ab4f36 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -16,7 +16,13 @@ dashedName: step-24
 Ваш селектор `.cabin` повинен мати властивість `animation` зі значенням `cabins 10s ease-in-out infinite`.
 
 ```js
-assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin');
+assert(
+  cabinElementStyles?.animationName === "cabins" &&
+    cabinElementStyles?.animationDuration === "10s" &&
+    cabinElementStyles?.animationTimingFunction === "ease-in-out" &&
+    cabinElementStyles?.animationIterationCount === "infinite"
+);
 ```
 
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index b4f4a45faf2..67ac24c5f7d 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -10,10 +10,10 @@ dashedName: step-12
 Будь-який текст можна перетворити на посилання. Наприклад, текст всередині елемента `p`.
 
 ``` html
-<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
+<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
 ```
 
-Перетворіть слова `cat photos` в тексті елемента `p` на посилання, додавши початковий та кінцевий теги посилання (`a`) навколо цих слів. Потім встановіть атрибут `href` на `https://freecatphotoapp.com/`
+Перетворіть слова `cat photos` в тексті елемента `p` на посилання, додавши початковий та кінцевий теги посилання (`a`) навколо цих слів. Then set the `href` attribute to `https://freecatphotoapp.com`
 
 
 # --hints--
@@ -21,22 +21,22 @@ dashedName: step-12
 Ви повинні вкласти новий елемент прив'язки (`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, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
 ```
 
 # --seed--