chore(i18n,learn): processed translations (#51494)

2026-09-24 23:01:18 +08:00 · 2023-09-06 12:29:19 -07:00
parent 7903cb9a8e
commit d18eae0589
127 changed files with 878 additions and 618 deletions
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
@@ -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;
 }
@@ -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>
@@ -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--
@@ -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"
+);
 ```


@@ -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--
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
@@ -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;
 }
@@ -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>
@@ -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--
@@ -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"
+);
 ```


@@ -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--
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
@@ -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;
 }
@@ -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>
@@ -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--
@@ -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"
+);
 ```


@@ -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--
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
@@ -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;
 }
@@ -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>
@@ -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--
@@ -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"
+);
 ```


@@ -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--
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
@@ -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;
 }
@@ -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>
@@ -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--
@@ -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"
+);
 ```


@@ -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--
@@ -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
@@ -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));
@@ -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%\);?/)
@@ -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%')
@@ -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');
@@ -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)')
@@ -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)')
@@ -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')
@@ -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%')
@@ -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)')
@@ -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'));
@@ -1,6 +1,6 @@
 ---
 id: 646f102bf87b350b593baa72
-title: Step 68
+title: Schritt 68
 challengeType: 0
 dashedName: step-68
 ---
@@ -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')
@@ -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'))
@@ -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--

@@ -1,6 +1,6 @@
 ---
 id: 649353647c44ef4867ab4935
-title: Step 17
+title: Schritt 17
 challengeType: 0
 dashedName: step-17
 ---
@@ -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)')
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
@@ -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;
 }
@@ -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>
@@ -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--
@@ -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"
+);
 ```


@@ -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--
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
@@ -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;
 }
@@ -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>
@@ -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--
@@ -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"
+);
 ```


@@ -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--
@@ -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--
@@ -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;
 }
@@ -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;
 }
 ```
@@ -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;
@@ -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>
@@ -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--
--- a/Show More
+++ b/Show More