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

2026-05-28 18:26:54 +00:00 · 2022-10-04 10:35:37 -07:00
parent fda0322b98
commit 6baaf2879d
66 changed files with 1105 additions and 158 deletions
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 你的產品登陸頁面應該至少使用一次 CSS Flexbox。

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 你的產品登陸頁面應該至少使用一次 CSS Flexbox。

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 你的产品登陆页面应该至少使用一次 CSS Flexbox。

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 你的产品登陆页面应该至少使用一次 CSS Flexbox。

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -91,7 +91,7 @@ Tu elemento `#navbar` debe contener al menos un elemento `a` cuyo atributo `href

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 Tu página de inicio de producto debe usar CSS Flexbox por lo menos una vez.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -79,7 +79,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  assert.isTrue(res.ok);
  if(!res.ok) {
@@ -96,7 +96,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -164,7 +164,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substingr(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -198,7 +198,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -237,7 +237,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -276,7 +276,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -319,7 +319,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  })
  if(res.ok){
    const {_id, username} = await res.json();
@@ -363,7 +363,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -410,7 +410,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -457,7 +457,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -504,7 +504,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -549,7 +549,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -278,7 +278,7 @@ function largeSum(arr) {

  sum = sum.toString(10);

-  sum = sum.substr(0, 1) + sum.substr(2);
+  sum = sum.substring(0, 1) + sum.substring(2);

  let firstTen = sum.slice(0, 10);
  return parseInt(firstTen, 10);
@@ -91,7 +91,7 @@ Tu elemento `#navbar` debe contener al menos un elemento `a` cuyo atributo `href

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 Tu página de aterrizaje de un producto debe usar CSS Flexbox por lo menos una vez.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -9,7 +9,7 @@ dashedName: step-11

 El texto de un enlace debe colocarse entre la etiqueta de apertura y la etiqueta de cierre de un elemento anchor (`a`). Por ejemplo, `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` es un enlace con el texto `click here to go to freeCodeCamp.org`.

-Añade el texto `cat photos` al elemento anchor. Esto se convertirá en el texto del enlace.
+Añade el texto `link to cat pictures` al elemento anchor. Esto se convertirá en el texto del enlace.

 # --hints--

@@ -25,12 +25,12 @@ Tu elemento anchor (`a`) debe tener una etiqueta de cierre. Las etiquetas de cie
 assert(code.match(/<\/a\>/));
 ```

-El texto de tu elemento anchor (`a`) debería ser `cat photos`. Asegúrate de poner el texto del enlace entre la etiqueta de apertura y etiqueta de cierre del elemento (`a`).
+El texto de tu elemento anchor (`a`) debería ser `link to cat pictures`. Asegúrate de poner el texto del enlace entre la etiqueta de apertura y etiqueta de cierre del elemento (`a`).

 ```js
 assert(
  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'cat photos'
+    'link to cat pictures'
 );
 ```

@@ -7,9 +7,10 @@ dashedName: step-12

 # --description--

-Ahora puedes ver las palabras `cat photos` subrayadas al lado de la imagen en la vista previa. Ese es tu enlace; no dudes en darle un clic.
+En el paso anterior has convertido las palabras `link to cat pictures` en un enlace colocándolas entre la apertura y el cierre de la etiqueta (`a`). Puedes hacer lo mismo con las palabras dentro de un elemento, como un elemento de `p`.
+
+En el texto de tu elemento `p`, convierte las palabras `cat photos` en un enlace a `https://freecatphotoapp.com` colocando estas palabras dentro de etiquetas de abertura y cierre (`a`).

-En el texto del elemento `p`, convierte las palabras `cat photos` en un enlace a `https://freecatphotoapp.com` anidando estas palabras dentro de un nuevo elemento de anclaje.

 # --hints--

@@ -19,7 +20,7 @@ Deberías anidar un nuevo elemento (`a`) dentro del elemento `p`.
 assert($('p > a').length);
 ```

-El valor del `href` del enlace debe ser `https://freecatphotoapp.com`. Has omitido el valor del `href` o tienes un error de escritura.
+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];
@@ -60,7 +61,7 @@ assert(pText.match(/click here to view more cat photos\.?$/));
      <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
      <p>Click here to view more cat photos.</p>
-      <a href="https://freecatphotoapp.com">cat photos</a>
+      <a href="https://freecatphotoapp.com">link to cat pictures</a>
 --fcc-editable-region--
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
@@ -7,7 +7,7 @@ dashedName: step-4

 # --description--

-Añade los elementos `title` y `meta` al elemento `head`. Dale a tu proyecto un título de `Registration Form`, y dale un atributo `charset` con el valor `UTF-8` a tu elemento `meta`.
+Añade un `title` y un elemento `meta` al `head`. Dale a tu proyecto un título de `Registration Form`, y dale un atributo `charset` con el valor `UTF-8` a tu elemento `meta`.

 # --hints--

@@ -9,7 +9,7 @@ dashedName: step-31

 Añade otro `label` después de la primero, con el texto `Input your age (years):`. Luego, anida un `input` con el `type` de `number`.

-Como no queremos que los usuarios menores de 13 años se registren añade un atributo `min` al `input` con un valor de `13`. Además, probablemente podemos asumir que los usuarios mayores de 120 años no se registrarán; añade un atributo `max` con un valor de `120`.
+A continuación, añade un atributo `min` al `input` con un valor de `13` porque los usuarios menores de 13 años no deben registrarse. Además, los usuarios probablemente no superen la edad de 120; agregue un atributo `max` con un valor de `120`.

 Ahora, si alguien intenta enviar el formulario con valores fuera del rango, aparecerá una advertencia, y el formulario no enviará. Pruébalo.

@@ -91,7 +91,7 @@ Dein `#navbar` Element sollte mindestens ein `a` Element, dessen `href` Attribut

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 Deine Produkt-Landingpage sollte mindestens einmal CSS-Flexbox verwenden.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -278,7 +278,7 @@ function largeSum(arr) {

  sum = sum.toString(10);

-  sum = sum.substr(0, 1) + sum.substr(2);
+  sum = sum.substring(0, 1) + sum.substring(2);

  let firstTen = sum.slice(0, 10);
  return parseInt(firstTen, 10);
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 Deine Produktseite sollte mindestens einmal die CSS-Flexbox verwenden.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -91,7 +91,7 @@ L'elemento `#navbar` dovrebbe contenere almeno un elemento `a` il cui attributo

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 La tua pagina dovrebbe usare CSS Flexbox almeno una volta.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -79,7 +79,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  assert.isTrue(res.ok);
  if(!res.ok) {
@@ -96,7 +96,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -164,7 +164,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substingr(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -198,7 +198,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -237,7 +237,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -276,7 +276,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -319,7 +319,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  })
  if(res.ok){
    const {_id, username} = await res.json();
@@ -363,7 +363,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -410,7 +410,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -457,7 +457,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -504,7 +504,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -549,7 +549,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -278,7 +278,7 @@ function largeSum(arr) {

  sum = sum.toString(10);

-  sum = sum.substr(0, 1) + sum.substr(2);
+  sum = sum.substring(0, 1) + sum.substring(2);

  let firstTen = sum.slice(0, 10);
  return parseInt(firstTen, 10);
@@ -95,10 +95,10 @@ function isValid(iban) {
    iban = __helpers.removeWhiteSpace(iban)
    if (!iban.match(/^[\dA-Z]+$/)) return false
    var len = iban.length
-    if (len != ibanLen[iban.substr(0,2)]) return false
-    iban = iban.substr(4) + iban.substr(0,4)
+    if (len != ibanLen[iban.substring(0,2)]) return false
+    iban = iban.substring(4) + iban.substring(0,4)
    for (var s='', i=0; i<len; i+=1) s+=parseInt(iban.charAt(i),36)
-    for (var m=s.substr(0,15)%97, s=s.substr(15); s; s=s.substr(13)) m=(m+s.substr(0,13))%97
+    for (var m=s.substring(0,15)%97, s=s.substring(15); s; s=s.substring(13)) m=(m+s.substring(0,13))%97
    return m == 1
 }
 ```
@@ -80,8 +80,8 @@ function lcs(a, b) {

 ```js
 function lcs(a, b) {
-  var aSub = a.substr(0, a.length - 1);
-  var bSub = b.substr(0, b.length - 1);
+  var aSub = a.substring(0, a.length - 1);
+  var bSub = b.substring(0, b.length - 1);

  if (a.length === 0 || b.length === 0) {
    return '';
@@ -91,7 +91,7 @@ L'elemento `#navbar` dovrebbe contenere almeno un elemento `a` il cui attributo

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 La tua pagina dovrebbe usare CSS Flexbox almeno una volta.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 プロダクトランディングページには、少なくとも 1 つの CSS フレックスボックスが使われている必要があります。

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -79,7 +79,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  assert.isTrue(res.ok);
  if(!res.ok) {
@@ -96,7 +96,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -164,7 +164,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substingr(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -198,7 +198,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -237,7 +237,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -276,7 +276,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -319,7 +319,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  })
  if(res.ok){
    const {_id, username} = await res.json();
@@ -363,7 +363,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -410,7 +410,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -457,7 +457,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -504,7 +504,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -549,7 +549,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -278,7 +278,7 @@ function largeSum(arr) {

  sum = sum.toString(10);

-  sum = sum.substr(0, 1) + sum.substr(2);
+  sum = sum.substring(0, 1) + sum.substring(2);

  let firstTen = sum.slice(0, 10);
  return parseInt(firstTen, 10);
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 プロダクトランディングページには、少なくとも 1 つの CSS フレックスボックスが使われている必要があります。

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: ステップ 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+手前のビルの後ろに少し隠れていますが、3 色のグラデーションが見えます。 この色を使うことにするので、`.bb1d` から `background-color` プロパティを削除してください。
+
+# --hints--
+
+`.bb1d` から `background-color` プロパティを削除する必要があります。
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: ステップ 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+グラデーションの遷移をどこで終わらせるかを指定するには、次のように、その位置を色に追加します:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+上の例では、要素の `0%` と `20%` の間で `color1` から `color2` まで遷移し、その後は `color3` まで遷移します。 `.bb1d` のグラデーションの色 `--building-color1` に `80%` を追加して、動作を確認してみましょう。
+
+# --hints--
+
+`.bb1d` の `linear-gradient` の色 `--building-color1` に、`80%` の値を追加する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: ステップ 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+`.bb1d` のグラデーションから `orange` を削除し、`80%` を `50%` に変更してください。 これで、上半分は `--building-color1` の色一色になり、下半分で `--window-color1` まで遷移します。
+
+# --hints--
+
+`linear-gradient` から `orange` を削除する必要があります。
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+`linear-gradient` の最初の色を `50%` から遷移するように変更する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
@@ -91,7 +91,7 @@ O elemento `#navbar` deve conter pelo menos um elemento `a`, cujo atributo `href

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -8,7 +8,7 @@ dashedName: falsy-bouncer

 # --description--

-Remover todos os valores falsos de um array.
+Remover todos os valores falsos de um array. Retorna um novo array; não altere o array original.

 Valores falsos (falsy) em JavaScript são `false`, `null`, `0`, `""`, `undefined`, e `NaN`.

@@ -40,6 +40,14 @@ assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
 assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
 ```

+Você não deve mutar `arr`.
+
+```js
+const arr = ['a', false, 0, 'Naomi'];
+bouncer(arr);
+assert.deepEqual(arr, ['a', false, 0, 'Naomi'])
+```
+
 # --seed--

 ## --seed-contents--
@@ -10,20 +10,20 @@ dashedName: add-elements-to-the-end-of-an-array-using-concat-instead-of-push

 Programação funcional é basicamente criar e utilizar funções que não modificam os seus argumentos.

-O último desafio mostrou como usar o método `concat` para criar um novo array a partir da combinação de outros sem modificar os originais. Compare os métodos `concat` e `push`. O `push` adiciona um item ao final do array à esquerda do `.`. Ele modifica o array. Exemplo:
+O último desafio mostrou como usar o método `concat` para criar um novo array a partir da mescla de outros sem modificar os originais. Compare os métodos `concat` e `push`. O `push` adiciona itens ao final do mesmo array a partir do qual ele é chamado. Ele modifica o array. Exemplo:

 ```js
 const arr = [1, 2, 3];
-arr.push([4, 5, 6]);
+arr.push(4, 5, 6);
 ```

-Modificamos `arr` para acomodar o novo valor: `[1, 2, 3, [4, 5, 6]]`. Mas não é assim que se faz em programação funcional.
+`arr` teria o valor modificado de: `[1, 2, 3, 4, 5, 6]`, mas não é assim que se faz em programação funcional.

-O `concat` nos oferece uma forma de adicionar novos itens ao final de um array sem alterá-lo.
+O `concat` nos oferece uma forma de mesclar novos itens ao final de um array sem alterá-lo.

 # --instructions--

-Modifique a função `nonMutatingPush` de forma que ela use `concat` para adicionar `newItem` ao final de `original` em vez de `push`. A função deve retornar um array.
+Modifique a função `nonMutatingPush` de modo que ela use `concat` para mesclar `newItem` ao final de `original` sem modificar os arrays `original` ou `newItem`. A função deve retornar um array.

 # --hints--

@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-bar-chart

 # --description--

-**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://codepen.io/freeCodeCamp/full/GrZVaM" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/GrZVaM</a>.
+**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a>.

 Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal.

@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-choropleth-map

 # --description--

-**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/EZKqza</a>.
+**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://choropleth-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://choropleth-map.freecodecamp.rocks</a>.

 Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal.

@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-heat-map

 # --description--

-**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://codepen.io/freeCodeCamp/full/JEXgeY" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/JEXgeY</a>.
+**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a>.

 Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal.

@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-scatterplot-graph

 # --description--

-**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://codepen.io/freeCodeCamp/full/bgpXyK" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/bgpXyK</a>.
+**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://scatterplot-graph.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://scatterplot-graph.freecodecamp.rocks</a>.

 Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal.

@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-treemap-diagram

 # --description--

-**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://codepen.io/freeCodeCamp/full/KaNGNR" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/KaNGNR</a>.
+**Objetivo:** criar uma aplicação que funcione de modo semelhante ao que vemos em: <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a>.

 Atenda às histórias de usuário abaixo e faça com que todos os testes passem. Use quaisquer bibliotecas ou APIs de que você precisar. Dê ao projeto o seu próprio estilo pessoal.

@@ -79,7 +79,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  assert.isTrue(res.ok);
  if(!res.ok) {
@@ -96,7 +96,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -164,7 +164,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substingr(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -198,7 +198,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -237,7 +237,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -276,7 +276,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -319,7 +319,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  })
  if(res.ok){
    const {_id, username} = await res.json();
@@ -363,7 +363,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -410,7 +410,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -457,7 +457,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -504,7 +504,7 @@ async(getUserInput) => {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
-    body: `username=fcc_test_${Date.now()}`.substr(0,29)
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
  });
  if(res.ok) {
    const {_id, username} = await res.json();
@@ -549,7 +549,7 @@ async (getUserInput) => {
  const res = await fetch(url + '/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: `username=fcc_test_${Date.now()}`.substr(0, 29)
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
  });
  if (res.ok) {
    const { _id, username } = await res.json();
@@ -8,7 +8,7 @@ dashedName: assert-deep-equality-with--deepequal-and--notdeepequal

 # --description--

-Lembrando que este projeto está sendo construído a partir do <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a> ou pode ser clonado no <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+Lembrando que este projeto está sendo construído a partir do projeto inicial no <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a> ou pode ser clonado no <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.

 `deepEqual()` assegura que dois objetos são profundamente iguais.

@@ -278,7 +278,7 @@ function largeSum(arr) {

  sum = sum.toString(10);

-  sum = sum.substr(0, 1) + sum.substr(2);
+  sum = sum.substring(0, 1) + sum.substring(2);

  let firstTen = sum.slice(0, 10);
  return parseInt(firstTen, 10);
@@ -51,7 +51,7 @@ assert(isValidSolution_(solve24(testCases_[0])));
 assert(isValidSolution_(solve24(testCases_[1])));
 ```

-`solve24("6789")` deve retornar `(6*8)/(9-7)`. `(8*6)/(9-7)` ou uma string válida semelhante
+`solve24("6789")` deve retornar `(6*8)/(9-7)`, `(8*6)/(9-7)` ou uma string válida semelhante

 ```js
 assert(isValidSolution_(solve24(testCases_[2])));
@@ -26,7 +26,7 @@ Feriados: `'Chaoflux', 'Discoflux', 'Confuflux', 'Bureflux', 'Afflux'`.

 Converta uma determinada data do calendário gregoriano para o calendário discordiano.

-Observe que, no calendário discordiano, (1º do caos de 3188 YOLD) é equivalente a (1º de janeiro de 2022) no calendário gregoriano.
+Observe que o dia Chaos 1, 3188 YOLD (1º do Caos de 3188) do calendário discordiano é o dia 1 de janeiro de 2022 do calendário gregoriano.

 # --hints--

@@ -95,10 +95,10 @@ function isValid(iban) {
    iban = __helpers.removeWhiteSpace(iban)
    if (!iban.match(/^[\dA-Z]+$/)) return false
    var len = iban.length
-    if (len != ibanLen[iban.substr(0,2)]) return false
-    iban = iban.substr(4) + iban.substr(0,4)
+    if (len != ibanLen[iban.substring(0,2)]) return false
+    iban = iban.substring(4) + iban.substring(0,4)
    for (var s='', i=0; i<len; i+=1) s+=parseInt(iban.charAt(i),36)
-    for (var m=s.substr(0,15)%97, s=s.substr(15); s; s=s.substr(13)) m=(m+s.substr(0,13))%97
+    for (var m=s.substring(0,15)%97, s=s.substring(15); s; s=s.substring(13)) m=(m+s.substring(0,13))%97
    return m == 1
 }
 ```
@@ -80,8 +80,8 @@ function lcs(a, b) {

 ```js
 function lcs(a, b) {
-  var aSub = a.substr(0, a.length - 1);
-  var bSub = b.substr(0, b.length - 1);
+  var aSub = a.substring(0, a.length - 1);
+  var bSub = b.substring(0, b.length - 1);

  if (a.length === 0 || b.length === 0) {
    return '';
@@ -91,7 +91,7 @@ O elemento `#navbar` deve conter pelo menos um elemento `a`, cujo atributo `href

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 A página inicial do produto deve utilizar o CSS flexbox pelo menos uma vez.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -7,9 +7,10 @@ dashedName: step-12

 # --description--

-Você pode ver as palavras `cat photos` sublinhadas ao lado da imagem na visualização agora. Esse é o seu link. Clique nele à vontade.
+No passo anterior, você transformou as palavras `link to cat pictures` em um link, colocando-as entre as tags de abertura e fechamento de âncora (`a`). Você pode fazer o mesmo com as palavras dentro de um elemento, como em um elemento `p`.
+
+No texto do elemento `p`, transforme as palavras `cat photos` em um link para `https://freecatphotoapp.com` colocando essas palavras dentro das tags de abertura e fechamento de um elemento de âncora (`a`).

-No texto do elemento `p`, transforme as palavras `cat photos` em um link para `https://freecatphotoapp.com` colocando essas palavras dentro de um novo elemento de âncora.

 # --hints--

@@ -19,7 +20,7 @@ Você deve colocar um novo elemento de âncora (`a`) dentro de cada elemento `p`
 assert($('p > a').length);
 ```

-O valor de href do link deve ser `https://freecatphotoapp.com`. Você omitiu o valor de href ou tem um erro de digitação.
+O valor de `href` do link deve ser `https://freecatphotoapp.com`. Você omitiu o valor de `href` ou tem um erro de digitação.

 ```js
 const nestedAnchor = $('p > a')[0];
@@ -60,7 +61,7 @@ assert(pText.match(/click here to view more cat photos\.?$/));
      <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
      <p>Click here to view more cat photos.</p>
-      <a href="https://freecatphotoapp.com">cat photos</a>
+      <a href="https://freecatphotoapp.com">link to cat pictures</a>
 --fcc-editable-region--
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 Посадкова сторінка продукту повинна використовувати CSS flexbox хоча б раз.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -278,7 +278,7 @@ function largeSum(arr) {

  sum = sum.toString(10);

-  sum = sum.substr(0, 1) + sum.substr(2);
+  sum = sum.substring(0, 1) + sum.substring(2);

  let firstTen = sum.slice(0, 10);
  return parseInt(firstTen, 10);
@@ -91,7 +91,7 @@ assert(!!el);

 ```js
 const links = [...document.querySelectorAll('#navbar a')].filter(
-  (nav) => (nav?.getAttribute('href') || '').substr(0, 1) === '#'
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
 );

 assert.isAbove(
@@ -254,12 +254,15 @@ assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
 Посадкова сторінка продукту повинна використовувати CSS flexbox хоча б раз.

 ```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
 const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
 const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
-const usesFlex = cssRules.find(rule => {
-  return rule.style?.display === 'flex' || rule.style?.display === 'inline-flex'
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
 })
-assert(usesFlex)
+assert(usesFlex || usesFlexMedia)
 ```

 # --seed--
@@ -7,9 +7,10 @@ dashedName: step-12

 # --description--

-Тепер в попередньому перегляді ви можете побачити підкреслені слова `cat photos` поруч із зображенням. Це ваше посилання; сміливо клацайте.
+У попередньому кроці ви перетворили слова `link to cat pictures` на посилання, розмістивши їх між початковим та кінцевим теґами прив’язки (`a`). Ви можете зробити те саме зі словами всередині елемента, наприклад елемента `p`.
+
+У тексті свого елемента `p` перетворіть слова `cat photos` на посилання `https://freecatphotoapp.com`, розмістивши ці слова всередині початкового та кінцевого теґів прив’язки (`a`).

-У тексті свого елемента `p` перетворіть слова `cat photos` на посилання `https://freecatphotoapp.com`, вклавши ці слова всередині нового елемента прив'язки.

 # --hints--

@@ -19,7 +20,7 @@ dashedName: step-12
 assert($('p > a').length);
 ```

-Значення href посилання повинне бути `https://freecatphotoapp.com`. Ви або не написали значення href, або маєте друкарську помилку.
+Значенням посилання `href` повинне бути `https://freecatphotoapp.com`. Ви або не написали значення `href`, або маєте друкарську помилку.

 ```js
 const nestedAnchor = $('p > a')[0];
@@ -60,7 +61,7 @@ assert(pText.match(/click here to view more cat photos\.?$/));
      <!-- TODO: Add link to cat photos -->
 --fcc-editable-region--
      <p>Click here to view more cat photos.</p>
-      <a href="https://freecatphotoapp.com">cat photos</a>
+      <a href="https://freecatphotoapp.com">link to cat pictures</a>
 --fcc-editable-region--
      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
    </main>
@@ -0,0 +1,138 @@
+---
+id: 62a3b365f1cdeb33efc2502e
+title: Крок 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+Ви оголошували змінні за допомогою ключового слова `var`. Однак у сучасному JavaScript краще використовувати ключове слово `let`. Воно вправляє незвичну поведінку `var`, яка могла ускладнити налагодження коду.
+
+Змініть всі ключові слова `var` на `let`.
+
+# --hints--
+
+Вам не потрібні ключові слова `var` у своєму коді.
+
+```js
+assert.notMatch(code, /var/);
+```
+
+Ви повинні використати ключове слово `let`, щоб оголосити змінну `xp`.
+
+```js
+assert.match(code, /let xp/);
+```
+
+Ви повинні використати ключове слово `let`, щоб оголосити змінну `health`.
+
+```js
+assert.match(code, /let health/);
+```
+
+Ви повинні використати ключове слово `let`, щоб оголосити змінну `gold`.
+
+```js
+assert.match(code, /let gold/);
+```
+
+Ви повинні використати ключове слово `let`, щоб оголосити змінну `currentWeapon`.
+
+```js
+assert.match(code, /let currentWeapon/);
+```
+
+Ви не повинні змінювати значення своїх змінних.
+
+```js
+assert.equal(xp, 0);
+assert.equal(health, 100);
+assert.equal(gold, 50);
+assert.equal(currentWeapon, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+var xp = 0;
+var health = 100;
+var gold = 50;
+var currentWeapon = 0;
+--fcc-editable-region--
+```
@@ -0,0 +1,142 @@
+---
+id: 62a3b506dbaead396f58a701
+title: Крок 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+В інвентарі гравця вашої гри буде декілька предметів. Вам потрібно буде використати той тип даних, який може так зробити. Для утримання декількох значень можна використати <dfn>масив</dfn>. Наприклад:
+
+```js
+let order = ["first", "second", "third"];
+```
+
+Це масив, який містить три значення. Зверніть увагу, що значення розділені комами. Змініть свою змінну `inventory` на масив з рядками `stick`, `dagger` та `sword`.
+
+# --hints--
+
+Ваша змінна `inventory` повинна бути масивом.
+
+```js
+assert.isArray(inventory);
+```
+
+Ваша змінна `inventory` повинна мати три значення.
+
+```js
+assert.lengthOf(inventory, 3);
+```
+
+Ваша змінна `inventory` повинна містити рядок `stick`.
+
+```js
+assert.include(inventory, "stick");
+```
+
+Ваша змінна `inventory` повинна містити рядок `dagger`.
+
+```js
+assert.include(inventory, "dagger");
+```
+
+Ваша змінна `inventory` повинна містити рядок `sword`.
+
+```js
+assert.include(inventory, "sword");
+```
+
+Ваша змінна `inventory` повинна мати значення в правильному порядку.
+
+```js
+assert.deepEqual(inventory, ["stick", "dagger", "sword"]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = "stick";
+--fcc-editable-region--
+```