From fe3acb02acb5b10a3a5a4cdac6ae85eb60112c91 Mon Sep 17 00:00:00 2001
From: camperbot <camperbot@users.noreply.github.com>
Date: Mon, 3 Oct 2022 06:44:03 -0700
Subject: [PATCH] chore(i18n,learn): processed translations (#47797)

---
 .../medical-data-visualizer.md                |  24 +-
 .../problem-19-counting-sundays.md            |  22 +-
 .../problem-20-factorial-digit-sum.md         |  24 +-
 .../problem-21-amicable-numbers.md            |  22 +-
 .../project-euler/problem-22-names-scores.md  |  18 +-
 .../problem-23-non-abundant-sums.md           |  22 +-
 .../problem-24-lexicographic-permutations.md  |  18 +-
 .../problem-25-1000-digit-fibonacci-number.md |  24 +-
 .../problem-26-reciprocal-cycles.md           |  20 +-
 .../medical-data-visualizer.md                |  28 +-
 .../62a3c668afc43b4a134cca81.md               | 150 ++++++++
 .../62a3c8bf3980c14c438d2aed.md               | 138 ++++++++
 .../62a3c91a2bab1b4d6fabb726.md               | 146 ++++++++
 .../62a3cdb11478a34ff4a6470d.md               | 152 ++++++++
 .../62a3cfc8328d3351b95d4f61.md               | 164 +++++++++
 .../62a7beb1ad61211ac153707f.md               | 176 ++++++++++
 .../62a7bf06d2ad9d1c5024e833.md               | 202 +++++++++++
 .../62a7bfd9179b7f1f6a15fb1e.md               | 172 +++++++++
 .../62a7c011eef9fb2084b966db.md               | 162 +++++++++
 .../5d822fd413a79914d39e98d1.md               |   2 +-
 .../5d822fd413a79914d39e98d2.md               |   2 +-
 .../5d822fd413a79914d39e98d6.md               |   2 +-
 .../5d822fd413a79914d39e98d7.md               |   2 +-
 .../5d822fd413a79914d39e98d8.md               |   6 +-
 .../5d822fd413a79914d39e98da.md               |   2 +-
 .../5d822fd413a79914d39e98dd.md               |   2 +-
 .../5d822fd413a79914d39e98e4.md               |   2 +-
 .../5d822fd413a79914d39e98e5.md               |   2 +-
 .../5d822fd413a79914d39e98e6.md               |   2 +-
 .../5d822fd413a79914d39e98e8.md               |   2 +-
 .../5d822fd413a79914d39e98f0.md               | 218 ++++++++++++
 .../5d822fd413a79914d39e98f1.md               | 223 ++++++++++++
 .../5d822fd413a79914d39e98f2.md               | 237 +++++++++++++
 .../5d822fd413a79914d39e98f3.md               | 222 ++++++++++++
 .../5d822fd413a79914d39e98f4.md               | 227 ++++++++++++
 .../60a3e3396c7b40068ad6996a.md               |   6 +-
 .../60a3e3396c7b40068ad6996f.md               |  47 +++
 .../60a3e3396c7b40068ad69970.md               |  53 +++
 .../60a3e3396c7b40068ad69971.md               |  67 ++++
 .../60a3e3396c7b40068ad69973.md               |  55 +++
 .../60a3e3396c7b40068ad69974.md               |  67 ++++
 .../60a3e3396c7b40068ad69975.md               |  67 ++++
 .../60a3e3396c7b40068ad69976.md               |  64 ++++
 .../60a3e3396c7b40068ad69977.md               |  65 ++++
 .../60a3e3396c7b40068ad69978.md               |  66 ++++
 .../60a3e3396c7b40068ad69979.md               |  71 ++++
 .../60a3e3396c7b40068ad6997a.md               |  74 ++++
 .../60a3e3396c7b40068ad6997b.md               |  70 ++++
 .../60a3e3396c7b40068ad6997c.md               |  71 ++++
 .../60a3e3396c7b40068ad6997d.md               |  74 ++++
 .../60a3e3396c7b40068ad6997e.md               |  75 ++++
 .../60a3e3396c7b40068ad6997f.md               |  82 +++++
 .../60a3e3396c7b40068ad69980.md               |  84 +++++
 .../60a3e3396c7b40068ad69981.md               |  84 +++++
 .../60a3e3396c7b40068ad69982.md               |  79 +++++
 .../60a3e3396c7b40068ad69983.md               |  80 +++++
 .../60a3e3396c7b40068ad69984.md               |  81 +++++
 .../60a3e3396c7b40068ad69986.md               |  93 +++++
 .../60a3e3396c7b40068ad69987.md               |  94 +++++
 .../60a3e3396c7b40068ad69988.md               |  87 +++++
 .../60a3e3396c7b40068ad69989.md               |  88 +++++
 .../60a3e3396c7b40068ad6998a.md               |  89 +++++
 .../60a3e3396c7b40068ad6998b.md               |  93 +++++
 .../60a3e3396c7b40068ad6998c.md               | 100 ++++++
 .../60a3e3396c7b40068ad6998d.md               | 108 ++++++
 .../60a3e3396c7b40068ad6998e.md               |  95 +++++
 .../60a3e3396c7b40068ad6998f.md               |  98 ++++++
 .../60a3e3396c7b40068ad69990.md               |  97 ++++++
 .../60a3e3396c7b40068ad69991.md               |  98 ++++++
 .../60a3e3396c7b40068ad69992.md               | 101 ++++++
 .../60a3e3396c7b40068ad69993.md               | 100 ++++++
 .../60a3e3396c7b40068ad69994.md               | 103 ++++++
 .../60a3e3396c7b40068ad69995.md               | 104 ++++++
 .../60a3e3396c7b40068ad69996.md               | 103 ++++++
 .../60a3e3396c7b40068ad69997.md               | 180 ++++++++++
 .../615f829d07b18f96f6f6684b.md               | 150 ++++++++
 .../615f83ef928ec9982b785b6a.md               | 156 +++++++++
 .../615f84f246e8ba98e3cd97be.md               | 193 +++++++++++
 .../615f887466db4ba14b5342cc.md               | 176 ++++++++++
 .../615f89e055040ba294719d2f.md               | 175 ++++++++++
 .../615f8bfe0f30a1a3c340356b.md               | 202 +++++++++++
 .../615f8f1223601fa546e93f31.md               | 184 ++++++++++
 .../615f94786869e1a7fec54375.md               | 176 ++++++++++
 .../615f951dff9317a900ef683f.md               | 325 ++++++++++++++++++
 .../medical-data-visualizer.md                |  28 +-
 .../5ddbd81294d8ddc1510a8e56.md               |   6 +-
 .../5ddbd81294d8ddc1510a8e56.md               |   6 +-
 .../62a2401b9842721796b72850.md               |  62 ++++
 .../62a2409897ec621942234cf6.md               |  86 +++++
 .../62a241df03c1f61ce936f5d9.md               | 101 ++++++
 .../62a3a0a3c0a4b32915d26a6e.md               | 132 +++++++
 .../62a3a488b24fb32b91155d56.md               | 112 ++++++
 .../62a3a75d8466a12e009eff76.md               | 136 ++++++++
 .../62a3a7e4f1060e2fc5ffb34b.md               | 122 +++++++
 .../62a3b3eab50e193608c19fc6.md               | 115 +++++++
 .../62a3b41c9494f937560640ab.md               | 140 ++++++++
 96 files changed, 8786 insertions(+), 147 deletions(-)
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md
 create mode 100644 curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md
 create mode 100644 curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md

diff --git a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
index 0695bfaf5fd..88555ef0606 100644
--- a/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
+++ b/curriculum/challenges/espanol/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
@@ -69,7 +69,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      edad
+      <code>age</code>
     </td>
     
     <td align="center">
@@ -87,7 +87,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      altura
+      <code>height</code>
     </td>
     
     <td align="center">
@@ -105,7 +105,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      peso
+      <code>weight</code>
     </td>
     
     <td align="center">
@@ -123,7 +123,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      género
+      <code>gender</code>
     </td>
     
     <td align="center">
@@ -141,7 +141,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      ap_hi
+      <code>ap_hi</code>
     </td>
     
     <td align="center">
@@ -159,7 +159,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      ap_lo
+      <code>ap_lo</code>
     </td>
     
     <td align="center">
@@ -177,7 +177,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      colesterol
+      <code>cholesterol</code>
     </td>
     
     <td align="center">
@@ -195,7 +195,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      glúcido
+      <code>gluc</code>
     </td>
     
     <td align="center">
@@ -213,7 +213,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      humo
+      <code>smoke</code>
     </td>
     
     <td align="center">
@@ -231,7 +231,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      alco
+      <code>alco</code>
     </td>
     
     <td align="center">
@@ -249,7 +249,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      activo
+      <code>active</code>
     </td>
     
     <td align="center">
@@ -267,7 +267,7 @@ Todavía estamos desarrollando la parte interactiva del currículo de Python. Po
     </td>
     
     <td align="center">
-      cardiaco
+      <code>cardio</code>
     </td>
     
     <td align="center">
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md
index c12d6d1c6b8..12409626592 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md
@@ -1,44 +1,44 @@
 ---
 id: 5900f37f1000cf542c50fe92
-title: 'Problem 19: Counting Sundays'
-challengeType: 5
+title: 'Problema 19: Contando domingos'
+challengeType: 1
 forumTopicId: 301827
 dashedName: problem-19-counting-sundays
 ---
 
 # --description--
 
-You are given the following information, but you may prefer to do some research for yourself.
+Se te proporciona la siguiente información, aunque quizá prefieras investigar por tu cuenta.
 
 <ul>
-  <li>1 Jan 1900 was a Monday.</li>
-  <li>Thirty days has September,<br>April, June and November.<br>All the rest have thirty-one,<br>Saving February alone,<br>Which has twenty-eight, rain or shine.<br>And on leap years, twenty-nine.</li>
-  <li>A leap year occurs on any year evenly divisible by 4, but not on a century unless it is divisible by 400.</li>
+  <li>El 1 de enero de 1900 fue lunes.</li>
+  <li>Treinta días tienen septiembre,<br>abril, junio y noviembre.<br>El resto tienen treinta y uno,<br>salvo febrero,<br>que tiene veintiocho, luzca el sol o diluvie.<br>Y en años bisiestos, veintinueve.</li>
+  <li>Un año es bisiesto si es divisible por 4, pero si es año secular (acabado en 00), también ha de ser divisible por 400.</li>
 </ul>
 
-How many Sundays fell on the first of the month during the twentieth century (1 Jan 1901 to 31 Dec 2000)?
+¿Cuántos domingos fueron primer día del mes en el siglo XX (del 1 de enero de 1901 al 31 de diciembre de 2000)?
 
 # --hints--
 
-`countingSundays(1943, 1946)` should return a number.
+`countingSundays(1943, 1946)` debe devolver un número.
 
 ```js
 assert(typeof countingSundays(1943, 1946) === 'number');
 ```
 
-`countingSundays(1943, 1946)` should return 6.
+`countingSundays(1943, 1946)` debe devolver 6.
 
 ```js
 assert.strictEqual(countingSundays(1943, 1946), 6);
 ```
 
-`countingSundays(1995, 2000)` should return 10.
+`countingSundays(1995, 2000)` debe devolver 10.
 
 ```js
 assert.strictEqual(countingSundays(1995, 2000), 10);
 ```
 
-`countingSundays(1901, 2000)` should return 171.
+`countingSundays(1901, 2000)` debe devolver 171.
 
 ```js
 assert.strictEqual(countingSundays(1901, 2000), 171);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md
index 579ac97f6f9..6bd7278c303 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md
@@ -1,53 +1,53 @@
 ---
 id: 5900f3801000cf542c50fe93
-title: 'Problem 20: Factorial digit sum'
-challengeType: 5
+title: 'Problema 20: Suma de los dígitos de un factorial'
+challengeType: 1
 forumTopicId: 301839
 dashedName: problem-20-factorial-digit-sum
 ---
 
 # --description--
 
-`n`! means `n` × (`n` − 1) × ... × 3 × 2 × 1
+`n`! se define como `n` × (`n` − 1) × ... × 3 × 2 × 1
 
-For example, 10! = 10 × 9 × ... × 3 × 2 × 1 = 3628800,  
-and the sum of the digits in the number 10! is 3 + 6 + 2 + 8 + 8 + 0 + 0 = 27.
+Por ejemplo, 10! = 10 × 9 × ... × 3 × 2 × 1 = 3628800,  
+y la suma de los dígitos del número 10! es 3 + 6 + 2 + 8 + 8 + 0 + 0 = 27.
 
-Find the sum of the digits `n`!
+Encuentra la suma de los dígitos de `n`!
 
 # --hints--
 
-`sumFactorialDigits(10)` should return a number.
+`sumFactorialDigits(10)` debe devolver un número.
 
 ```js
 assert(typeof sumFactorialDigits(10) === 'number');
 ```
 
-`sumFactorialDigits(10)` should return 27.
+`sumFactorialDigits(10)` debe devolver 27.
 
 ```js
 assert.strictEqual(sumFactorialDigits(10), 27);
 ```
 
-`sumFactorialDigits(25)` should return 72.
+`sumFactorialDigits(25)` debe devolver 72.
 
 ```js
 assert.strictEqual(sumFactorialDigits(25), 72);
 ```
 
-`sumFactorialDigits(50)` should return 216.
+`sumFactorialDigits(50)` debe devolver 216.
 
 ```js
 assert.strictEqual(sumFactorialDigits(50), 216);
 ```
 
-`sumFactorialDigits(75)` should return 432.
+`sumFactorialDigits(75)` debe devolver 432.
 
 ```js
 assert.strictEqual(sumFactorialDigits(75), 432);
 ```
 
-`sumFactorialDigits(100)` should return 648.
+`sumFactorialDigits(100)` debe devolver 648.
 
 ```js
 assert.strictEqual(sumFactorialDigits(100), 648);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md
index 58acfba70e1..5a34f1363b7 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md
@@ -1,48 +1,48 @@
 ---
 id: 5900f3811000cf542c50fe94
-title: 'Problem 21: Amicable numbers'
-challengeType: 5
+title: 'Problema 21: Número amigos'
+challengeType: 1
 forumTopicId: 301851
 dashedName: problem-21-amicable-numbers
 ---
 
 # --description--
 
-Let d(`n`) be defined as the sum of proper divisors of `n` (numbers less than `n` which divide evenly into `n`).
+Se define d(`n`) como la suma de los divisores propios de `n` (números menores que `n` los cuales dividen de forma exacta a `n`).
 
-If d(`a`) = `b` and d(`b`) = `a`, where `a` ≠ `b`, then `a` and `b` are an amicable pair and each of `a` and `b` are called amicable numbers.
+Si d(`a`) = `b` y d(`b`) = `a`, donde `a` ≠ `b`, entonces `a` y `b` forman un par de números amigos, siendo `a` y `b` números amigos.
 
-For example, the proper divisors of 220 are 1, 2, 4, 5, 10, 11, 20, 22, 44, 55 and 110; therefore d(220) = 284. The proper divisors of 284 are 1, 2, 4, 71 and 142; so d(284) = 220.
+Por ejemplo, los divisores propios de 220 son 1, 2, 4, 5, 10, 11, 20, 22, 44, 55 y 110; por tanto d(220) = 284. Los divisores propios de 284 son 1, 2, 4, 71 y 142; así pues d(284) = 220.
 
-Evaluate the sum of all the amicable numbers under `n`.
+Evalúa la suma de todos los números amigos por debajo de `n`.
 
 # --hints--
 
-`sumAmicableNum(1000)` should return a number.
+`sumAmicableNum(1000)` debe devolver un número.
 
 ```js
 assert(typeof sumAmicableNum(1000) === 'number');
 ```
 
-`sumAmicableNum(1000)` should return 504.
+`sumAmicableNum(1000)` debe devolver 504.
 
 ```js
 assert.strictEqual(sumAmicableNum(1000), 504);
 ```
 
-`sumAmicableNum(2000)` should return 2898.
+`sumAmicableNum(2000)` debe devolver 2898.
 
 ```js
 assert.strictEqual(sumAmicableNum(2000), 2898);
 ```
 
-`sumAmicableNum(5000)` should return 8442.
+`sumAmicableNum(5000)` debe devolver 8442.
 
 ```js
 assert.strictEqual(sumAmicableNum(5000), 8442);
 ```
 
-`sumAmicableNum(10000)` should return 31626.
+`sumAmicableNum(10000)` debe devolver 31626.
 
 ```js
 assert.strictEqual(sumAmicableNum(10000), 31626);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-22-names-scores.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-22-names-scores.md
index e93e40d6ef4..3112e27d224 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-22-names-scores.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-22-names-scores.md
@@ -1,40 +1,40 @@
 ---
 id: 5a51eabcad78bf416f316e2a
-title: 'Problem 22: Names scores'
-challengeType: 5
+title: 'Problema 22: Puntuaciones de nombres'
+challengeType: 1
 forumTopicId: 301862
 dashedName: problem-22-names-scores
 ---
 
 # --description--
 
-Using `names`, an array defined in the background containing over five-thousand first names, begin by sorting it into alphabetical order. Then working out the alphabetical value for each name, multiply this value by its alphabetical position in the list to obtain a name score.
+El array `names` está definido en segundo plano y contiene aproximadamente cinco mil nombres de pila. La primera tarea es ordenarlo alfabéticamente. Después halla la suma, para cada nombre, del orden alfabético de sus letras (valor alfabético) y multiplica ese valor por la posición que ocupa en la lista ordenada alfabéticamente.
 
-For example, when the list is sorted into alphabetical order, COLIN, which is worth 3 + 15 + 12 + 9 + 14 = 53, is the 938th name in the list. So, COLIN would obtain a score of 938 × 53 = 49714.
+Po ejemplo, una vez que la lista está ordenada alfabéticamente, COLIN, cuyo valor alfabético es 3 + 15 + 12 + 9 + 14 = 53, ocupa la posición 938 en la lista. Por tanto, COLIN obtiendrá una puntuación de 938 × 53 = 49714.
 
-What is the total of all the name scores in the array?
+¿Cuánto vale la suma de todas las puntuaciones de los nombres en el array?
 
 # --hints--
 
-`namesScores(test1)` should return a number.
+`namesScores(test1)` debe devolver un número.
 
 ```js
 assert(typeof namesScores(test1) === 'number');
 ```
 
-`namesScores(test1)` should return 791.
+`namesScores(test1)` debe devolver 791.
 
 ```js
 assert.strictEqual(namesScores(test1), 791);
 ```
 
-`namesScores(test2)` should return 1468.
+`namesScores(test2)` debe devolver 1468.
 
 ```js
 assert.strictEqual(namesScores(test2), 1468);
 ```
 
-`namesScores(names)` should return 871198282.
+`namesScores(names)` debe devolver 871198282.
 
 ```js
 assert.strictEqual(namesScores(names), 871198282);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md
index ce8b2262e4a..a2b17ef4723 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md
@@ -1,48 +1,48 @@
 ---
 id: 5900f3831000cf542c50fe96
-title: 'Problem 23: Non-abundant sums'
-challengeType: 5
+title: 'Problema 23: Sumas no abundantes'
+challengeType: 1
 forumTopicId: 301873
 dashedName: problem-23-non-abundant-sums
 ---
 
 # --description--
 
-A perfect number is a number for which the sum of its proper divisors is exactly equal to the number. For example, the sum of the proper divisors of 28 would be 1 + 2 + 4 + 7 + 14 = 28, which means that 28 is a perfect number.
+Un número perfecto es aquel que es igual a la suma de sus divisores propios. Por ejemplo, la suma de los divisores propios de 28 es 1 + 2 + 4 + 7 + 14 = 28, con lo cual 28 es un número perfecto.
 
-A number `n` is called deficient if the sum of its proper divisors is less than `n` and it is called abundant if this sum exceeds `n`.
+Un número `n` es deficiente si la suma de sus divisores propios es menor que `n`, y es abundante si dicha suma es mayor que `n`.
 
-As 12 is the smallest abundant number, 1 + 2 + 3 + 4 + 6 = 16, the smallest number that can be written as the sum of two abundant numbers is 24. By mathematical analysis, it can be shown that all integers greater than 28123 can be written as the sum of two abundant numbers. However, this upper limit cannot be reduced any further by analysis even though it is known that the greatest number that cannot be expressed as the sum of two abundant numbers is less than this limit.
+Como 12 es el número abundante más pequeño, 1 + 2 + 3 + 4 + 6 = 16, el número más pequeño que puede ser expresado como suma de dos números abundantes es 24. Mediante análisis matemático, puede demostrarse que todo entero mayor que 28123 puede expresarse como la suma de dos números abundantes. Sin embargo, se sabe que el mayor número que no se puede expresar como la suma de dos números abundantes es menor que ese límite, aunque esto no ha podido ser demostrado rigurosamente.
 
-Find the sum of all positive integers &lt;= `n` which cannot be written as the sum of two abundant numbers.
+Encuentra la suma de todos los enteros positivos &lt;= `n` que no se pueden expresar como la suma de dos números abundantes.
 
 # --hints--
 
-`sumOfNonAbundantNumbers(10000)` should return a number.
+`sumOfNonAbundantNumbers(10000)` debe devolver un número.
 
 ```js
 assert(typeof sumOfNonAbundantNumbers(10000) === 'number');
 ```
 
-`sumOfNonAbundantNumbers(10000)` should return 3731004.
+`sumOfNonAbundantNumbers(10000)` debe devolver 3731004.
 
 ```js
 assert(sumOfNonAbundantNumbers(10000) === 3731004);
 ```
 
-`sumOfNonAbundantNumbers(15000)` should return 4039939.
+`sumOfNonAbundantNumbers(15000)` debe devolver 4039939.
 
 ```js
 assert(sumOfNonAbundantNumbers(15000) === 4039939);
 ```
 
-`sumOfNonAbundantNumbers(20000)` should return 4159710.
+`sumOfNonAbundantNumbers(20000)` debe devolver 4159710.
 
 ```js
 assert(sumOfNonAbundantNumbers(20000) === 4159710);
 ```
 
-`sumOfNonAbundantNumbers(28123)` should return 4179871.
+`sumOfNonAbundantNumbers(28123)` debe devolver 4179871.
 
 ```js
 assert(sumOfNonAbundantNumbers(28123) === 4179871);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md
index 49998335d2e..e0d4dc5301b 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md
@@ -1,46 +1,46 @@
 ---
 id: 5900f3841000cf542c50fe97
-title: 'Problem 24: Lexicographic permutations'
-challengeType: 5
+title: 'Problema 24: Permutaciones lexicográficas'
+challengeType: 1
 forumTopicId: 301885
 dashedName: problem-24-lexicographic-permutations
 ---
 
 # --description--
 
-A permutation is an ordered arrangement of objects. For example, 3124 is one possible permutation of the digits 1, 2, 3 and 4. If all of the permutations are listed numerically or alphabetically, we call it lexicographic order. The lexicographic permutations of 0, 1 and 2 are:
+Una permutación es una disposición ordenada de objetos. Por ejemplo, 3124 es una posible permutación de los dígitos 1, 2, 3 y 4. Llamamos orden lexicográfico a todas las permutaciones listadas numérica o alfabéticamante. Las permutaciones lexicográficas de 0, 1 y 2 son:
 
 <div style='text-align: center;'>012   021   102   120   201   210</div>
 
-What is the `n`th lexicographic permutation of the digits 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9?
+¿Cuál es la permutación que ocupa el lugar `n` en el orden lexicográfico de los dígitos 0, 1, 2, 3, 4, 5, 6, 7, 8 y 9?
 
 # --hints--
 
-`lexicographicPermutations(699999)` should return a number.
+`lexicographicPermutations(699999)` debe devolver un número.
 
 ```js
 assert(typeof lexicographicPermutations(699999) === 'number');
 ```
 
-`lexicographicPermutations(699999)` should return 1938246570.
+`lexicographicPermutations(699999)` debe devolver 1938246570.
 
 ```js
 assert(lexicographicPermutations(699999) == 1938246570);
 ```
 
-`lexicographicPermutations(899999)` should return 2536987410.
+`lexicographicPermutations(899999)` debe devolver 2536987410.
 
 ```js
 assert(lexicographicPermutations(899999) == 2536987410);
 ```
 
-`lexicographicPermutations(900000)` should return 2537014689.
+`lexicographicPermutations(900000)` debe devolver 2537014689.
 
 ```js
 assert(lexicographicPermutations(900000) == 2537014689);
 ```
 
-`lexicographicPermutations(999999)` should return 2783915460.
+`lexicographicPermutations(999999)` debe devolver 2783915460.
 
 ```js
 assert(lexicographicPermutations(999999) == 2783915460);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md
index ca7d277f447..301b03f3b4f 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md
@@ -1,52 +1,52 @@
 ---
 id: 5900f3851000cf542c50fe98
-title: 'Problem 25: 1000-digit Fibonacci number'
-challengeType: 5
+title: 'Problema 25: Número de Fibonacci de 1000 dígitos'
+challengeType: 1
 forumTopicId: 301897
 dashedName: problem-25-1000-digit-fibonacci-number
 ---
 
 # --description--
 
-The Fibonacci sequence is defined by the recurrence relation:
+La sucesión de Fibonacci se define mediante la siguiente relación recursiva:
 
-<div style='padding-left: 4em;'>F<sub>n</sub> = F<sub>n−1</sub> + F<sub>n−2</sub>, where F<sub>1</sub> = 1 and F<sub>2</sub> = 1.</div>
+<div style='padding-left: 4em;'>F<sub>n</sub> = F<sub>n−1</sub> + F<sub>n−2</sub>, donde F<sub>1</sub> = 1 and F<sub>2</sub> = 1.</div>
 
-Hence the first 12 terms will be:
+Por tanto, los primeros 12 términos serán:
 
 <div style='padding-left: 4em; display: inline-grid; grid-template-rows: auto; row-gap: 7px;'><div>F<sub>1</sub> = 1</div><div>F<sub>2</sub> = 1</div><div>F<sub>3</sub> = 2</div><div>F<sub>4</sub> = 3</div><div>F<sub>5</sub> = 5</div><div>F<sub>6</sub> = 8</div><div>F<sub>7</sub> = 13</div><div>F<sub>8</sub> = 21</div><div>F<sub>9</sub> = 34</div><div>F<sub>10</sub> = 55</div><div>F<sub>11</sub> = 89</div><div>F<sub>12</sub> = 144</div></div>
 
-The 12th term, F<sub>12</sub>, is the first term to contain three digits.
+El 12º término, F<sub>12</sub>, es el primero que tiene tres dígitos.
 
-What is the index of the first term in the Fibonacci sequence to contain `n` digits?
+¿Cuál es el índice del primer término de la sucesión de Fibonacci que tiene `n` dígitos?
 
 # --hints--
 
-`digitFibonacci(5)` should return a number.
+`digitFibonacci(5)` debe devolver un número.
 
 ```js
 assert(typeof digitFibonacci(5) === 'number');
 ```
 
-`digitFibonacci(5)` should return 21.
+`digitFibonacci(5)` debe devolver 21.
 
 ```js
 assert.strictEqual(digitFibonacci(5), 21);
 ```
 
-`digitFibonacci(10)` should return 45.
+`digitFibonacci(10)` debe devolver 45.
 
 ```js
 assert.strictEqual(digitFibonacci(10), 45);
 ```
 
-`digitFibonacci(15)` should return 69.
+`digitFibonacci(15)` debe devolver 69.
 
 ```js
 assert.strictEqual(digitFibonacci(15), 69);
 ```
 
-`digitFibonacci(20)` should return 93.
+`digitFibonacci(20)` debe devolver 93.
 
 ```js
 assert.strictEqual(digitFibonacci(20), 93);
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md
index d6ee972f907..b3b2585be3c 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md
@@ -1,48 +1,48 @@
 ---
 id: 5900f3861000cf542c50fe99
-title: 'Problem 26: Reciprocal cycles'
-challengeType: 5
+title: 'Problema 26: Períodos en fracciones unitarias'
+challengeType: 1
 forumTopicId: 301908
 dashedName: problem-26-reciprocal-cycles
 ---
 
 # --description--
 
-A unit fraction contains 1 in the numerator. The decimal representation of the unit fractions with denominators 2 to 10 are given:
+Fracción unitaria es aquella cuyo numerador es 1. Se muestra la representación decimal de las fracciones unitarias con denominadores de 2 a 10:
 
 <div style='padding-left: 4em; display: inline-grid; grid-template-rows: auto; row-gap: 7px;'><div><sup>1</sup>/<sub>2</sub> = 0.5</div><div><sup>1</sup>/<sub>3</sub> = 0.(3)</div><div><sup>1</sup>/<sub>4</sub> = 0.25</div><div><sup>1</sup>/<sub>5</sub> = 0.2</div><div><sup>1</sup>/<sub>6</sub> = 0.1(6)</div><div><sup>1</sup>/<sub>7</sub> = 0.(142857)</div><div><sup>1</sup>/<sub>8</sub> = 0.125</div><div><sup>1</sup>/<sub>9</sub> = 0.(1)</div><div><sup>1</sup>/<sub>10</sub> = 0.1</div></div>
 
-Where 0.1(6) means 0.166666..., and has a 1-digit recurring cycle. It can be seen that <sup>1</sup>/<sub>7</sub> has a 6-digit recurring cycle.
+Donde 0.1(6) representa 0.166666..., teniendo un período de 1 dígito. Así mismo, <sup>1</sup>/<sub>7</sub> tiene un período de 6 dígitos.
 
-Find the value of `d` &lt; `n` for which <sup>1</sup>/<sub>d</sub> contains the longest recurring cycle in its decimal fraction part.
+Encuentra el valor de `d` &lt; `n` para el cual <sup>1</sup>/<sub>d</sub> posee el período más largo en su parte decimal.
 
 # --hints--
 
-`reciprocalCycles(700)` should return a number.
+`reciprocalCycles(700)` debe devolver un número.
 
 ```js
 assert(typeof reciprocalCycles(700) === 'number');
 ```
 
-`reciprocalCycles(700)` should return 659.
+`reciprocalCycles(700)` debe devolver 659.
 
 ```js
 assert(reciprocalCycles(700) == 659);
 ```
 
-`reciprocalCycles(800)` should return 743.
+`reciprocalCycles(800)` debe devolver 743.
 
 ```js
 assert(reciprocalCycles(800) == 743);
 ```
 
-`reciprocalCycles(900)` should return 887.
+`reciprocalCycles(900)` debe devolver 887.
 
 ```js
 assert(reciprocalCycles(900) == 887);
 ```
 
-`reciprocalCycles(1000)` should return 983.
+`reciprocalCycles(1000)` debe devolver 983.
 
 ```js
 assert(reciprocalCycles(1000) == 983);
diff --git a/curriculum/challenges/italian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/italian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
index c33a96201dc..fc202607fe9 100644
--- a/curriculum/challenges/italian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
+++ b/curriculum/challenges/italian/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
@@ -26,20 +26,20 @@ Le righe nel set di dati rappresentano i pazienti e le colonne rappresentano inf
 
 Nome del file: medical_examination.csv
 
-|                 Caratteristica                 | Tipo Di Variabile |  Variabile  |                              Tipo Di Valore                              |
-|:----------------------------------------------:|:-----------------:|:-----------:|:------------------------------------------------------------------------:|
-|                      Età                       |  Dato oggettivo   |     age     |                               int (giorni)                               |
-|                    Altezza                     |  Dato oggettivo   |   height    |                                 int (cm)                                 |
-|                      Peso                      |  Dato oggettivo   |   weight    |                                float (kg)                                |
-|                     Genere                     |  Dato oggettivo   |   gender    |                           codice di categoria                            |
-|              Pressione sistolica               |   Dato da esami   |    ap_hi    |                                   int                                    |
-|         Pressione sanguigna diastolica         |   Dato da esami   |    ap_lo    |                                   int                                    |
-|                  Colesterolo                   |   Dato da esami   | cholesterol | 1: normale, 2: al di sopra del normale, 3: molto al di sopra del normale |
-|                    Glucosio                    |   Dato da esami   |    gluc     | 1: normale, 2: al di sopra del normale, 3: molto al di sopra del normale |
-|                    Fumatore                    |  Dato soggettivo  |    smoke    |                                 binario                                  |
-|              Assunzione di alcol               |  Dato soggettivo  |    alco     |                                 binario                                  |
-|                Attività fisica                 |  Dato soggettivo  |   active    |                                 binario                                  |
-| Presenza o assenza di malattie cardiovascolari | Variabile target  |   cardio    |                                 binario                                  |
+|                 Caratteristica                 | Tipo Di Variabile |   Variabile   |                              Tipo Di Valore                              |
+|:----------------------------------------------:|:-----------------:|:-------------:|:------------------------------------------------------------------------:|
+|                      Età                       |  Dato oggettivo   |     `age`     |                               int (giorni)                               |
+|                    Altezza                     |  Dato oggettivo   |   `height`    |                                 int (cm)                                 |
+|                      Peso                      |  Dato oggettivo   |   `weight`    |                                float (kg)                                |
+|                     Genere                     |  Dato oggettivo   |   `gender`    |                           codice di categoria                            |
+|              Pressione sistolica               |   Dato da esami   |    `ap_hi`    |                                   int                                    |
+|         Pressione sanguigna diastolica         |   Dato da esami   |    `ap_lo`    |                                   int                                    |
+|                  Colesterolo                   |   Dato da esami   | `cholesterol` | 1: normale, 2: al di sopra del normale, 3: molto al di sopra del normale |
+|                    Glucosio                    |   Dato da esami   |    `gluc`     | 1: normale, 2: al di sopra del normale, 3: molto al di sopra del normale |
+|                    Fumatore                    |  Dato soggettivo  |    `smoke`    |                                 binario                                  |
+|              Assunzione di alcol               |  Dato soggettivo  |    `alco`     |                                 binario                                  |
+|                Attività fisica                 |  Dato soggettivo  |   `active`    |                                 binario                                  |
+| Presenza o assenza di malattie cardiovascolari | Variabile target  |   `cardio`    |                                 binario                                  |
 
 ## Compiti
 
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md
new file mode 100644
index 00000000000..f92afb820ee
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md
@@ -0,0 +1,150 @@
+---
+id: 62a3c668afc43b4a134cca81
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Le funzioni sono degli strumenti speciali che ti permettono di eseguire sezioni di codice in momenti specifici. Puoi dichiarare funzioni con la parola chiave `function`. Ecco un esempio di una funzione chiamata `functionName` - nota le parentesi graffe di apertura e chiusura. Indicano la porzione di codice all'interno della funzione.
+
+```js
+function functionName() {
+
+}
+```
+
+Crea una funzione vuota chiamata `goStore`. Corrisponderà alla variabile `goStore` usata precedentemente.
+
+# --hints--
+
+Dovresti dichiarare `goStore` con la parola chiave `function`.
+
+```js
+assert.match(code, /function\s*goStore()/);
+```
+
+`goStore` dovrebbe essere definita.
+
+```js
+assert.isDefined(goStore);
+```
+
+`goStore` dovrebbe essere una funzione.
+
+```js
+assert.isFunction(goStore);
+```
+
+`goStore` dovrebbe essere una funzione vuota.
+
+```js
+assert.equal(goStore.toString(), "function goStore() {}");
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md
new file mode 100644
index 00000000000..cb3940f6ac8
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md
@@ -0,0 +1,138 @@
+---
+id: 62a3c8bf3980c14c438d2aed
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+Per ora, fai in modo che l'output della funzione `goStore` sia il messaggio `Going to store.` sulla console. Ad esempio, ecco una funzione il cui output è il messaggio "Hello World".
+
+```js
+function functionName() {
+    console.log("Hello World");
+}
+```
+
+# --hints--
+
+Dovresti avere la riga `console.log("Going to store.");` nel tuo codice. Non dimenticare il punto e virgola.
+
+```js
+assert.match(code, /console\.log\(('|")Going to store\.\1\);/);
+```
+
+La riga `console.log("Going to store.");` dovrebbe essere nella funzione `goStore`.
+
+```js
+assert.match(goStore.toString(), /console\.log\(('|")Going to store\.\1\);/);
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md
new file mode 100644
index 00000000000..0cb4e93d282
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md
@@ -0,0 +1,146 @@
+---
+id: 62a3c91a2bab1b4d6fabb726
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Adesso crea una funzione `goCave` che stampa `Going to cave.` sulla console.
+
+# --hints--
+
+Dovresti usare la parola chiave `function` per dichiarare `goCave`.
+
+```js
+assert.match(code, /function goCave/);
+```
+
+`goCave` dovrebbe essere una funzione.
+
+```js
+assert.isFunction(goCave);
+```
+
+Dovresti avere la riga `console.log("Going to cave.");` nel tuo codice.
+
+```js
+assert.match(code, /console.log\(('|")Going to cave\.\1\)/);
+```
+
+La riga `console.log("Going to cave.");` dovrebbe essere nella funzione `goCave`.
+
+```js
+assert.match(goCave.toString(), /console.log\(('|")Going to cave\.\1\)/);
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function goStore() {
+  console.log("Going to store.");
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md
new file mode 100644
index 00000000000..909b04a57ef
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md
@@ -0,0 +1,152 @@
+---
+id: 62a3cdb11478a34ff4a6470d
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Adesso crea una funzione `fightDragon` che stampa `Fighting dragon.` sulla console.
+
+Una volta fatto ciò, apri la console e prova a cliccare i pulsanti del tuo progetto.
+
+# --hints--
+
+Dovresti usare la parola chiave `function` per dichiarare `fightDragon`.
+
+```js
+assert.match(code, /function fightDragon/);
+```
+
+`fightDragon` dovrebbe essere una funzione.
+
+```js
+assert.isFunction(fightDragon);
+```
+
+Dovresti avere la riga `console.log("Fighting dragon.");` nel tuo codice.
+
+```js
+assert.match(code, /console.log\(('|")Fighting dragon\.\1\)/);
+```
+
+La riga `console.log("Fighting dragon.");` dovrebbe essere nella funzione `fightDragon`.
+
+```js
+assert.match(fightDragon.toString(), /console.log\(('|")Fighting dragon\.\1\)/);
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function goStore() {
+  console.log("Going to store.");
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md
new file mode 100644
index 00000000000..3e20b48477b
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md
@@ -0,0 +1,164 @@
+---
+id: 62a3cfc8328d3351b95d4f61
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+La proprietà `innerText` controlla il testo che appare in un elemento HTML. Ad esempio:
+
+```js
+const info = document.querySelector("#info");
+info.innerText = "Hello World";
+```
+
+Questo codice cambia l'elemento assegnato alla variabile `div` in modo che abbia il testo `Hello World`.
+
+Quando un giocatore clicca sul pulsante `Go to store`, vuoi che cambino i pulsanti e il testo. Rimuovi il codice nella funzione `goStore` e aggiungi una riga che aggiorna il testo di `button1` in `Buy 10 health (10 gold)`.
+
+# --hints--
+
+Non dovresti avere la riga `console.log("Going to store.");` nel tuo codice.
+
+```js
+assert.notMatch(code, /console.log\(('|")Going to store\.\1\)/);
+```
+
+Dovresti usare la dot notation per accedere alla proprietà `innerText` di `button1`.
+
+```js
+assert.match(code, /button1\.innerText/);
+```
+
+Non dovresti usare `let` o `const` per accedere alla proprietà `innerText` di `button1`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button1.innerText/);
+```
+
+Dovresti aggiornare la proprietà `innerText` di `button1` in modo che sia `Buy 10 health (10 gold)`.
+
+```js
+assert.match(code, /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/);
+```
+
+Dovresti aggiornare la proprietà `innerText` nella funzione `goStore`.
+
+```js
+assert.match(goStore.toString(), /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/);
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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 {
+    border: 1px solid black;
+    padding: 5px;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+  console.log("Going to store.");
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md
new file mode 100644
index 00000000000..568c5d52433
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md
@@ -0,0 +1,176 @@
+---
+id: 62a7beb1ad61211ac153707f
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Ora aggiungi una riga che aggiorna il testo di `button2` in `Buy weapon (30 gold)` e aggiorna il testo di `button3` in `Go to town square`.
+
+# --hints--
+
+Dovresti usare la dot notation per accedere alla proprietà `innerText` di `button2`.
+
+```js
+assert.match(code, /button2\.innerText/);
+```
+
+Non dovresti usare `let` o `const` per accedere alla proprietà `innerText` di `button2`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button2.innerText/);
+```
+
+Dovresti aggiornare la proprietà `innerText` di `button2` in modo che sia `Buy weapon (30 gold)`.
+
+```js
+assert.match(code, /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/);
+```
+
+Dovresti aggiornare la proprietà `innerText` nella funzione `goStore`.
+
+```js
+assert.match(goStore.toString(), /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/);
+```
+
+Dovresti usare la dot notation per accedere alla proprietà `innerText` di `button3`.
+
+```js
+assert.match(code, /button3\.innerText/);
+```
+
+Non dovresti usare `let` o `const` per accedere alla proprietà `innerText` di `button3`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button3.innerText/);
+```
+
+Dovresti aggiornare la proprietà `innerText` di `button3` in modo che sia `Go to town square`.
+
+```js
+assert.match(code, /button3\.innerText\s*=\s*('|")Go to town square\1/);
+```
+
+Dovresti aggiornare la proprietà `innerText` nella funzione `goStore`.
+
+```js
+assert.match(goStore.toString(), /button3\.innerText\s*=\s*('|")Go to town square\1/);
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md
new file mode 100644
index 00000000000..ca93773d440
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md
@@ -0,0 +1,202 @@
+---
+id: 62a7bf06d2ad9d1c5024e833
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+Avrai anche bisogno di aggiornare le funzioni che vengono eseguite quando vengono cliccati i pulsanti. Aggiorna le proprietà `onclick` per ogni pulsante in modo che eseguano rispettivamente `buyHealth`, `buyWeapon` e `goTown`.
+
+# --hints--
+
+Dovresti usare la dot notation per accedere alla proprietà `onclick` di `button1`.
+
+```js
+assert.match(code, /button1\.onclick/);
+```
+
+Non dovresti usare `let` o `const` per accedere alla proprietà `onclick` di `button1`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button1.onclick/);
+```
+
+Dovresti impostare la proprietà `onclick` di `button1` con `buyHealth`.
+
+```js
+assert.match(code, /button1\.onclick\s*=\s*buyHealth/);
+```
+
+Dovresti impostare la proprietà `onclick` di `button1` nella funzione `goStore`.
+
+```js
+assert.match(goStore.toString(), /button1\.onclick\s*=\s*buyHealth/);
+```
+
+Dovresti usare la dot notation per accedere alla proprietà `onclick` di `button2`.
+
+```js
+assert.match(code, /button2\.onclick/);
+```
+
+Non dovresti usare `let` o `const` per accedere alla proprietà `onclick` di `button2`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button2.onclick/);
+```
+
+Dovresti impostare la proprietà `onclick` di `button2` con `buyWeapon`.
+
+```js
+assert.match(code, /button2\.onclick\s*=\s*buyWeapon/);
+```
+
+Dovresti impostare la proprietà `onclick` di `button2` nella funzione `goStore`.
+
+```js
+assert.match(goStore.toString(), /button2\.onclick\s*=\s*buyWeapon/);
+```
+
+Dovresti usare la dot notation per accedere alla proprietà `onclick` di `button3`.
+
+```js
+assert.match(code, /button3\.onclick/);
+```
+
+Non dovresti usare `let` o `const` per accedere alla proprietà `onclick` di `button3`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button3.onclick/);
+```
+
+Dovresti impostare la proprietà `onclick` di `button3` con `goTown`.
+
+```js
+assert.match(code, /button3\.onclick\s*=\s*goTown/);
+```
+
+Dovresti impostare la proprietà `onclick` di `button3` nella funzione `goStore`.
+
+```js
+assert.match(goStore.toString(), /button3\.onclick\s*=\s*goTown/);
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md
new file mode 100644
index 00000000000..7190dae55be
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md
@@ -0,0 +1,172 @@
+---
+id: 62a7bfd9179b7f1f6a15fb1e
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Crea tre nuove funzioni vuote chiamate `buyHealth`, `buyWeapon` e `goTown`.
+
+# --hints--
+
+Dovresti dichiarare `buyHealth` con la parola chiave `function`.
+
+```js
+assert.match(code, /function buyHealth/);
+```
+
+Dovresti dichiarare `buyWeapon` con la parola chiave `function`.
+
+```js
+assert.match(code, /function buyWeapon/);
+```
+
+Dovresti dichiarare `goTown` con la parola chiave `function`.
+
+```js
+assert.match(code, /function goTown/);
+```
+
+`buyHealth` dovrebbe essere una funzione vuota.
+
+```js
+assert.equal(buyHealth.toString(), 'function buyHealth() {}');
+```
+
+`buyWeapon` dovrebbe essere una funzione vuota.
+
+```js
+assert.equal(buyWeapon.toString(), 'function buyWeapon() {}');
+```
+
+`goTown` dovrebbe essere una funzione vuota.
+
+```js
+assert.equal(goTown.toString(), 'function goTown() {}');
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md
new file mode 100644
index 00000000000..280019a23d1
--- /dev/null
+++ b/curriculum/challenges/italian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md
@@ -0,0 +1,162 @@
+---
+id: 62a7c011eef9fb2084b966db
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Sposta la funzione `goTown` sopra la funzione `goStore`. Poi copia e incolla il contenuto della funzione `goStore` nella funzione `goTown`.
+
+# --hints--
+
+La funzione `goTown` dovrebbe trovarsi prima della funzione `goStore`.
+
+```js
+const goTown = code.split(" ").indexOf("goTown()");
+const goStore = code.split(" ").indexOf("goStore()");
+assert.isBelow(goTown, goStore);
+```
+
+La funzione `goTown` dovrebbe avere lo stesso contenuto della funzione `goStore`.
+
+```js
+const goTownString = goTown.toString().replace("goTown", "");
+const goStoreString = goStore.toString().replace("goStore", "");
+assert.equal(goTownString, goStoreString);
+```
+
+# --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>
+</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>
+    <script src="./script.js"></script>
+</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
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+--fcc-editable-region--
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+
+function goTown() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
index 09ec9dcf9de..3b9e0cd1d40 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
@@ -7,7 +7,7 @@ dashedName: step-9
 
 # --description--
 
-背景のビル群 (background buildings) の要素について `width` と `height` を `100%` に設定し、親要素である `body` の幅および高さ全体に広がるようにしましょう。
+`.background-buildings` の要素について `width` と `height` を `100%` に設定し、親要素である `body` の幅および高さ全体に広がるようにしましょう。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
index 339caa80785..daac2471cb1 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
@@ -7,7 +7,7 @@ dashedName: step-10
 
 # --description--
 
-背景のビル群のコンテナー内に、クラス `bb1` を持つ `div` をネストしてください。 次に `styles.css` ファイルを開いて、`.bb1` の `width` を `10%` に、`height` を `70%` に設定してください。 「bb」は「background building」の略で、これを 1 つ目のビルにします。
+奥のビル群のコンテナー内に、クラス `bb1` を持つ `div` をネストしてください。 次に `styles.css` ファイルを開いて、`.bb1` の `width` を `10%` に、`height` を `70%` に設定してください。 「bb」は「background building」の略で、これを 1 つ目のビルにします。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
index 9b10769579f..dff498e319a 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
@@ -7,7 +7,7 @@ dashedName: step-14
 
 # --description--
 
-少しビルらしく見えてきました。 ではここで初めての変数を作成しましょう。 変数の宣言は 2 つのハイフン (`-`) で書き始め、変数名と値を「`--variable-name: value;`」という形式で指定します。 `.bb1` クラス内に `--building-color1` という名前の変数を作成し、`#999` という値を代入してください。
+少しビルらしく見えてきました。 ではここで初めての変数を作成しましょう。 変数の宣言は 2 つのハイフン (`-`) で書き始め、変数名と値を「`--variable-name: value;`」という形式で指定します。 `bb1` クラスのルール内に `--building-color1` という名前の変数を作成し、`#999` という値を代入してください。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
index dbd685bdabf..43e0efad1ef 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
@@ -13,7 +13,7 @@ dashedName: step-15
 
 # --hints--
 
-`bb1a` の要素に `background-color` を設定する必要があります。
+`.bb1a` の要素に `background-color` を設定する必要があります。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
index 20c3b064257..52aedd95f7b 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
@@ -11,7 +11,7 @@ dashedName: step-16
 
 # --hints--
 
-`bb1b` の要素に `background-color` が設定されている必要があります。
+`.bb1b` の要素に `background-color` を設定する必要があります。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
@@ -23,7 +23,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor
 assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
-`bb1c` の要素に `background-color` が設定されている必要があります。
+`.bb1c` の要素に `background-color` を設定する必要があります。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
@@ -35,7 +35,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor
 assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
 ```
 
-`bb1d` の要素に `background-color` が設定されている必要があります。
+`.bb1d` の要素に `background-color` を設定する必要があります。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
index e48463d8132..592ce62506c 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
@@ -7,7 +7,7 @@ dashedName: step-18
 
 # --description--
 
-1 つ目のビルはだいぶ良くなりました。 では `background-buildings` コンテナーの中に新しい `div` 要素を 3 つ追加して、そのクラスを順に `bb2`、`bb3`、`bb4` に設定してください。 これが残り 3 つの背景のビルになります。
+1 つ目のビルはだいぶ良くなりました。 では `.background-buildings` コンテナーの中に新しい `div` 要素を 3 つ追加して、そのクラスを順に `bb2`、`bb3`、`bb4` に設定してください。 これが残り 3 つの奥のビルになります。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
index 27646d7e93e..bd1b3b9b798 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
@@ -7,7 +7,7 @@ dashedName: step-21
 
 # --description--
 
-ビルの間隔が広すぎますね。 間隔を狭めるために、空の `div` 要素を `background-buildings` 要素の先頭に 2 つ、末尾に 2 つ、`.bb3` と `.bb4` の間に 1 つ追加しましょう。 コンテナー全体に等間隔で配置される要素にこれらが加わることで、結果としてビルが中央に寄せられます。
+ビルの間隔が広すぎますね。 間隔を狭めるために、空の `div` 要素を `.background-buildings` 要素の先頭に 2 つ、末尾に 2 つ、`.bb3` と `.bb4` の間に 1 つ追加しましょう。 コンテナー全体に等間隔で配置される要素にこれらが加わることで、結果としてビルが中央に寄せられます。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
index 79f7cfd915a..0b5142ad92d 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
@@ -7,7 +7,7 @@ dashedName: step-28
 
 # --description--
 
-背景のビル群が良い感じになってきました。 `background-buildings` 要素の下に新しい `div` を作成し、クラスを `foreground-buildings` に設定してください。 これをもう 1 つのコンテナーとして更にビルを追加していきます。
+奥のビル群が良い感じになってきました。 `.background-buildings` 要素の下に新しい `div` を作成し、クラスを `foreground-buildings` に設定してください。 これをもう 1 つのコンテナーとして更にビルを追加していきます。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
index 453ebc89fb4..5675e1c09b9 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
@@ -7,7 +7,7 @@ dashedName: step-29
 
 # --description--
 
-前景のビル群 (foreground buildings) のコンテナーが背景のビル群の要素の上にぴったり重なるようにしましょう。 このコンテナーの `width` と `height` を `100%` に、`position` を `absolute` に、`top` を `0` に設定してください。 これでコンテナーのサイズが body と同じになり、開始位置が左上の角に移動されます。
+`.foreground-buildings` のコンテナーが `.background-buildings` の要素の上にぴったり重なるようにしましょう。 このコンテナーの `width` と `height` を `100%` に、`position` を `absolute` に、`top` を `0` に設定してください。 これでコンテナーのサイズが body と同じになり、開始位置が左上の角に移動されます。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
index a00eb9d7b0b..6c2a678aa1a 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
@@ -7,7 +7,7 @@ dashedName: step-30
 
 # --description--
 
-`.foreground-buildings` の中に `div` 要素を 6 つネストして、それぞれのクラスを順に `fb1` から `fb6` に設定してください。 「fb」は「foreground building」の略です。 これを前景の 6 つのビルにします。
+`.foreground-buildings` の中に `div` 要素を 6 つネストして、それぞれのクラスを順に `fb1` から `fb6` に設定してください。 「fb」は「foreground building」の略です。 これを手前の 6 つのビルにします。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
index 59e27f831a2..88e47a04671 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
@@ -7,7 +7,7 @@ dashedName: step-32
 
 # --description--
 
-`background-buildings` で使用したものと同じ `display`、`align-items`、および `justify-content` プロパティと値を `foreground-buildings` に追加してください。 この設定により、ここでもフレックスボックスを使用して、各ビルがコンテナーの下端に等間隔で配置されます。
+`.background-buildings` で使用したものと同じ `display`、`align-items`、および `justify-content` プロパティと値を `.foreground-buildings` に追加してください。 この設定により、ここでもフレックスボックスを使用して、各ビルがコンテナーの下端に等間隔で配置されます。
 
 # --hints--
 
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 00000000000..8d674e59fcc
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: ステップ 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+CSS のグラデーションは、要素の距離に沿って色を遷移させる手法です。 グラデーションは `background` プロパティに適用します。構文は次のようになります。
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+上の例では、上部が `color1` の色、下部が `color2` の色となり、その合間は一方からもう一方の色へと均等に変化します。 では `.bb1a` に、タイプ `linear-gradient` のグラデーションを `background` プロパティに追加してください。1 番目の色として`--building-color1` を使用し、2 番目の色として `--window-color1` を 使用してください。
+
+# --hints--
+
+`.bb1a` に `background` を適用する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+`background` に `linear-gradient` を設定する必要があります。
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+`background` に `--building-color1` から始まる `linear-gradient` を設定する必要があります。
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+`background` に `--window-color1` で終わる `linear-gradient` を設定する必要があります。
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),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"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></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;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-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);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 00000000000..9891c00bd6b
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: ステップ 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+同じグラデーションを次の 2 つのセクションに追加してみましょう。 その方法として、`bb1-window` という名前の新しいクラスセレクターを作成し、`height` と `background` のプロパティと値を `.bb1a` から新しいクラスセレクターに移動してください。
+
+# --hints--
+
+`bb1-window` という新しいクラスセレクターを作成する必要があります。
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+`height` プロパティと値を `.bb1a` から `.bb1-window` に移動する必要があります。
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+`background` プロパティと値を `.bb1a` から `.bb1-window` に移動する必要があります。
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+`.bb1a` から `background-color` プロパティを移動しないでください。
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+`.bb1a` から `width` プロパティを移動しないでください。
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --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"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></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;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.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);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 00000000000..ecf0761ec5a
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: ステップ 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+先ほど作成した新しい `bb1-window` クラスを `.bb1a`、 `.bb1b`、および `.bb1c` 要素に追加してください。 これで、グラデーションがそれらの要素に適用されます。
+
+# --hints--
+
+`bb1a` クラスを削除しないでください。
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+`.bb1a` 要素に `bb1-window` クラスを追加する必要があります。
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+`bb1b` クラスを削除しないでください。
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+`.bb1b` 要素に `bb1-window` クラスを追加する必要があります。
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+`bb1c` クラスを削除しないでください。
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+`.bb1c` 要素に `bb1-window` クラスを追加する必要があります。
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+`.bb1d` 要素を変更しないでください。
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --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>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <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%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.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);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 00000000000..03f8c87806d
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: ステップ 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+`.bb1a`、`.bb1b`、および `.bb1c` の `height` プロパティと `background-color` プロパティは不要になったので削除しましょう。
+
+# --hints--
+
+`.bb1a` から `background-color` を削除する必要があります。
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+`.bb1b` から `height` プロパティを削除する必要があります。
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+`.bb1b` から `background-color` プロパティを削除する必要があります。
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+`.bb1c` から `height` プロパティを削除する必要があります。
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+`.bb1c` から `background-color` プロパティを削除する必要があります。
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --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;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.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);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 00000000000..9818be0fcd1
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: ステップ 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+グラデーションでは、次のように好きな数だけ色を使用できます:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+`linear-gradient` を `.bb1d` に追加してください。1 番目の色として `orange` を、2 番目の色として `--building-color1` を、3 番目の色として `--window-color1` を設定してください。 グラデーションは `background` プロパティで使用することを忘れないでください。
+
+# --hints--
+
+`.bb1d` に `background` を使用する必要があります。
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+`background` プロパティに `linear-gradient` を設定する必要があります。
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+`linear-gradient` の 1 番目の色として `orange` を使用する必要があります。
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+`linear-gradient` の 2 番目の色として `--building-color1` を使用する必要があります。
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+`linear-gradient` の 3 番目の色として `--window-color1` を使用する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),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-color: var(--building-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);
+}
+
+```
+
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
index 565586a816c..e6c6959ef7a 100644
--- a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
@@ -9,7 +9,7 @@ dashedName: step-1
 
 ここまで来れば、HTML ページが持つべき基本的な要素には見覚えがあるかと思います。
 
-`DOCTYPE` 宣言、`html` 要素、`head` 要素、`body` 要素でコードを書き始めましょう。
+`DOCTYPE` 宣言、言語を英語に設定した `html` 要素、`head` 要素、および `body` 要素をコードに準備してください。
 
 # --hints--
 
@@ -19,10 +19,10 @@ dashedName: step-1
 assert(code.match(/<!DOCTYPE html>/i));
 ```
 
-コードには `html` 要素が 1 つ必要です。
+`lang` 属性を `en` にした開始タグ `<html>` が必要です。
 
 ```js
-assert(document.querySelectorAll('html').length === 1);
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
 ```
 
 コードの `html` 要素内に `head` 要素が必要です。
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 00000000000..b909b035c70
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: ステップ 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+`body` 内に `div` 要素を追加してください。
+
+`class` 属性を `canvas` に設定してください。 例えば `<div class="my-div">` のようにして設定します。
+
+この要素が、あなたの絵画のキャンバスとなります。
+
+# --hints--
+
+コードには `div` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+`div` 要素の `class` を `canvas` に設定する必要があります。
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 00000000000..3adbfa8418e
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: ステップ 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+追加した `div` のスタイル設定を始める前に、CSS を HTML にリンクする必要があります。
+
+`styles.css` ファイルにリンクする `link` 要素を追加してください。 `href` を `./styles.css` に設定し、`rel` 属性も忘れずに `stylesheet` に設定してください。
+
+# --hints--
+
+コードには `link` 要素が 1 つ必要です。
+
+```js
+assert(/<link/.test(code))
+```
+
+`link` 要素は値が `stylesheet` に設定されている `rel` 属性を持つ必要があります。
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+`link` 要素は値が `styles.css` に設定されている `href` 属性を持つ必要があります。
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 00000000000..e6ae0a586c4
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: ステップ 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+では CSS を書きましょう。
+
+`<div>` にはテキストがありませんが、それでもコンテンツの入ったボックスとして扱われます。 `.canvas` クラスセレクターを使って CSS ルールを作成し、その `width` を 500 ピクセルに設定してください。 下記は、`card` クラスの幅を 300 ピクセルに設定する CSS ルールの例です。
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+コード内に `.canvas` セレクターが必要です。
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+`width` プロパティを `500px` に設定する必要があります。
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+`.canvas` 要素の `width` が `500px` である必要があります。
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 00000000000..6daec9f8c18
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: ステップ 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+キャンバスの `background-color` を `#4d0f00` に変更してください。
+
+# --hints--
+
+`background-color` プロパティを `#4d0f00` に設定する必要があります。
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+`.canvas` 要素の `background-color` は `#4d0f00` である必要があります。
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 00000000000..d4015c6094e
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: ステップ 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+絵画には額縁が必要です。
+
+`.canvas` 要素を別の `div` で囲んでください。 その `div` に `frame` というクラスを設定してください。
+# --hints--
+
+新しい `div` 要素を 1 つ追加してください。
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+`.canvas` 要素は新しい `div` 要素の中にネストされる必要があります。
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+新しい `div` には `frame` という値の `class` が必要です。
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+新しい `div` は `body` 要素内にある必要があります。
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 00000000000..9eeba697501
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: ステップ 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+`.frame` というクラスセレクターを使用して、新しいルールを書きましょう。
+
+`border` の一括指定を使用して、`.frame` 要素に、実線 (solid)、黒色 (black)、幅 `50px` の境界線を設定してください。
+
+# --hints--
+
+コード内に `.frame` セレクターが必要です。
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+`border` プロパティを `50px solid black` に設定する必要があります。
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+`.frame` 要素は `50px solid black` の `border` を持つ必要があります。
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 00000000000..b3abfae6278
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: ステップ 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+額縁の横幅が広すぎますね。
+
+`.frame` の `width` を 500 ピクセルに設定してください。
+
+# --hints--
+
+`width` プロパティを `500px` に設定する必要があります。
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+`.frame` 要素の `width` が `500px` である必要があります。
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 00000000000..805a5548e2f
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: ステップ 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+要素内の余白を調整するには、パディングを使用します。
+
+`.frame` について、`padding` 一括指定プロパティを使用して `.frame` 要素と `.canvas` 要素の間の余白を `50px` に増やしてください。 一括指定により、要素の境界線と内側のキャンバスの間隔が上下左右すべて広がります。
+
+# --hints--
+
+`padding` プロパティを `50px` に設定する必要があります。
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+`.frame` 要素には値が `50px` の `padding` が必要です。
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 00000000000..2e6930ce06e
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: ステップ 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+要素外の余白を調整するには、マージンを使用します。
+
+`margin` プロパティを使用して、`.frame` 要素の垂直方向のマージンを `20px` に、水平方向のマージンを `auto` に設定してください。 これにより、額縁が 20 ピクセル下に移動し、ページの水平方向の中央に配置されます。
+
+# --hints--
+
+`margin` プロパティを `20px auto` に設定する必要があります。
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+`.frame` 要素には値が `20px auto` の `margin` が必要です。
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 00000000000..c5cc2a74578
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: ステップ 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+`.canvas` 要素内に新しい `div` 要素を追加してください。
+
+新しい `div` の `class` 属性には `one` という値を設定してください。 これが 1 つ目の長方形になります。
+
+# --hints--
+
+新しい `div` 要素を作成してください。
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+`.canvas` 要素の中に新しい `div` 要素をネストする必要があります。
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+新しい `div` には `class` 属性と値 `one` が必要です。
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 00000000000..d48541c3ba2
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: ステップ 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+`.one` を選択する新しいルールを作成し、その `width` を 425 ピクセルに設定してください。
+
+# --hints--
+
+`.one` セレクターが必要です。
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+`width` プロパティを `425px` に設定する必要があります。
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+`.one` 要素の `width` の値が `425px` である必要があります。
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 00000000000..689d958034f
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: ステップ 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+では `.one` の `height` を 150 ピクセルに設定してください。
+
+# --hints--
+
+`height` プロパティを `150px` に設定する必要があります。
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+`.one` 要素の `height` の値が `150px` である必要があります。
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 00000000000..351c86c04c4
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: ステップ 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+`.one` の `background-color` を `#efb762` に設定してください。
+
+# --hints--
+
+`background-color` プロパティを `#efb762` に設定する必要があります。
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+`.one` 要素の `background-color` の値が `#efb762` である必要があります。
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 00000000000..e669c9a3fd2
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: ステップ 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+マージンを利用して、`.one` 要素のキャンバス上の位置を調整しましょう。
+
+`margin` 一括指定プロパティを追加して、垂直方向のマージンを `20px`、水平方向のマージンを `auto` に設定してください。
+
+# --hints--
+
+`margin` プロパティを `20px auto` に設定する必要があります。
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+`.one` 要素の `margin` の値が `20px auto` である必要があります。
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 00000000000..539d333a1a6
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: ステップ 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+`.one` を水平方向の中央に配置できましたが、上のマージンがキャンバスを越えて額縁の境界線を押しやって、キャンバス全体を 20 ピクセル下に移動させています。
+
+`.one` 要素が押しやることのできる実体を追加するため、`.canvas` 要素に `1px` の `padding` を追加しましょう。
+
+# --hints--
+
+`padding` プロパティを `1px` に設定する必要があります。
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+`.canvas` 要素の `padding` の値が `1px` である必要があります。
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 00000000000..ae67dbd9cbc
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: ステップ 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+キャンバスの上下左右に 1 ピクセルのパディングを追加したことで、寸法が 502 ピクセル × 602 ピクセルに変わりました。
+
+`padding` プロパティを `overflow` プロパティに置き換えて `hidden` に設定し、キャンバスの寸法を元に戻しましょう。
+
+# --hints--
+
+`.canvas` セレクターから `padding` プロパティを削除する必要があります。
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+`overflow` プロパティを `hidden` に設定する必要があります。
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+`.canvas` 要素の `overflow` の値が `hidden` である必要があります。
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 00000000000..2be0a76d5de
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: ステップ 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+`one` の要素の下に別の `div` を追加して、`class` の値を `two` に設定してください。 これが 2 つ目の長方形になります。
+
+# --hints--
+
+既存の `.one` 要素を変更しないでください。
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+`.canvas` 要素の中に 2 つ目の `div` 要素をネストする必要があります。
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+2 つ目の `div` 要素の `class` の値を `two` に設定する必要があります。
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+`.two` の要素は `.one` の要素の後に置く必要があります。
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 00000000000..9828340f199
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: ステップ 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+`.two` のセレクターを使って新しい CSS ルールを作成し、その `width` を 475 ピクセルに設定してください。
+
+# --hints--
+
+`.two` セレクターが必要です。
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+`width` プロパティを `475px` に設定する必要があります。
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+`.two` 要素の `width` の値が `475px` である必要があります。
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 00000000000..3ad9a547f04
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: ステップ 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+`.two` 要素の `height` を 200 ピクセルに設定してください。
+
+# --hints--
+
+`height` プロパティを `200px` に設定する必要があります。
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+`.two` 要素の `height` の値が `200px` である必要があります。
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 00000000000..90cf61aa196
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: ステップ 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+`.two` 要素の `background-color` を `#8f0401` に設定してください。
+
+# --hints--
+
+`background-color` プロパティを `#8f0401` に設定する必要があります。
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+`.two` 要素の `background-color` の値が `#8f0401` である必要があります。
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 00000000000..28b4b40ce98
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: ステップ 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+`margin` を `auto` に設定して、`.two` 要素を中央に配置してください。
+
+# --hints--
+
+`margin` プロパティを `auto` に設定する必要があります。
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+`.two` 要素の `margin` の値が `auto` である必要があります。
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 00000000000..77688c2d8fc
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: ステップ 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+`.two` の要素の下に新しい `div` を追加して、`class` の値を `three` に設定してください。 これが 3 つ目の長方形になります。
+
+# --hints--
+
+既存の `.one` と `.two` の要素は変更しないでください。
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+新しい `div` は `.canvas` 要素内にネストされる必要があります。
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+新しい `div` は `.two` 要素の後に置く必要があります。
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+新しい `div` には `three` という値の `class` が必要です。
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 00000000000..38b86d68990
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: ステップ 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+要素のサイズを指定するとき、必ずしもピクセルを使用する必要はありません。
+
+新しいルール `.three` を作成し、その `width` を `91%` に設定してください。
+
+# --hints--
+
+`.three` セレクターを使用する必要があります。
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+`width` プロパティを `91%` に設定する必要があります。
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+`.three` 要素の `width` の値が `91%` である必要があります。
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 00000000000..12cd8b9ebcc
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: ステップ 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+`.three` の `height` を `28%` に設定してください。
+
+# --hints--
+
+`height` プロパティを `28%` に設定する必要があります。
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+`.three` 要素の `height` の値が `28%` である必要があります。
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 00000000000..3a405d53abf
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: ステップ 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+`.three` の `background-color` を `#b20403` に変更してください。
+
+# --hints--
+
+`background-color` プロパティを `#b20403` に設定する必要があります。
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+`.three` 要素の `background-color` の値が `#b20403` である必要があります。
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 00000000000..6e258d9b812
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: ステップ 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+`.three` 要素をキャンバスの中央に配置するため、`margin` を `auto` に設定してください。
+
+# --hints--
+
+`margin` プロパティを `auto` に設定する必要があります。
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+`.three` 要素の `margin` の値が `auto` である必要があります。
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 00000000000..17d403a5422
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: ステップ 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+マージンが押しやる方向を一方向にしておくと便利です。
+
+ここでは、`.one` 要素の下部マージンが `.two` を下方向に 20 ピクセル押しやっています。
+
+`.two` セレクターの中で、`margin` 一括指定プロパティを使用して上部マージンを `0` に、水平方向のマージンを `auto` に、下部マージンを `20px` に設定してください。 これにより上部マージンが取り除かれ、水平方向の中央に配置され、下部マージンが 20 ピクセルに設定されます。
+
+# --hints--
+
+`margin` プロパティを `0 auto 20px` に設定する必要があります。
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+`.two` 要素の `margin` の値が `0 auto 20px` である必要があります。
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 00000000000..451f995f2ee
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: ステップ 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+この絵の色や形は、ロスコの絵と言うにはシャープすぎますね。
+
+`.canvas` 要素に `filter` プロパティを使って、絵に `2px` の `blur` (ぼかし) の効果をかけましょう。
+
+こちらが 3px の `blur` を追加するルールの例です:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+`filter` プロパティを `blur(2px)` に設定する必要があります。
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+`.canvas` 要素の `filter` の値が `blur(2px)` である必要があります。
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 00000000000..5b4e81dab72
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: ステップ 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+`.one` と `.two` の両方を選択するルールを作成し、さらに 1 ピクセルの `blur` 効果をかけてください。
+
+# --hints--
+
+`.one, .two` のセレクターリストが必要です。
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+`filter` プロパティを `blur(1px)` に設定する必要があります。
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+`.one` 要素の `filter` の値が `blur(1px)` である必要があります。
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+`.two` 要素の `filter` の値が `blur(1px)` である必要があります。
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 00000000000..892d0031614
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: ステップ 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+`.three` に 2 ピクセルの `blur` を追加してください。
+
+# --hints--
+
+`filter` プロパティを `blur(2px)` に設定する必要があります。
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+`.three` 要素の `filter` の値が `blur(2px)` である必要があります。
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 00000000000..807da2f8d06
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: ステップ 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+長方形が小さすぎるのと、辺に絵画の柔らかい質感がありません。
+
+`box-shadow` を `0 0 3px 3px #efb762` に設定し、`.one` の領域を大きくして境界をぼかしましょう。
+
+# --hints--
+
+`box-shadow` プロパティを `0 0 3px 3px #efb762` に設定する必要があります。
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+`.one` 要素の `box-shadow` の値が `0 0 3px 3px #efb762` である必要があります。
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 00000000000..0b75dadbcde
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: ステップ 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+同じ `box-shadow` の宣言を `.two` にも使用しますが、色は `#efb762` から `#8f0401` に変更してください。
+
+# --hints--
+
+`box-shadow` プロパティを `0 0 3px 3px #8f0401` に設定する必要があります。
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+`.two` 要素の `box-shadow` の値が `0 0 3px 3px #8f0401` である必要があります。
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 00000000000..187c66f3177
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: ステップ 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+`.three` に `box-shadow` を追加し、値は `0 0 5px 5px #b20403` に設定してください。
+
+# --hints--
+
+`box-shadow` プロパティを `0 0 5px 5px #b20403` に設定する必要があります。
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+`.three` 要素の `box-shadow` の値が `0 0 5px 5px #b20403` である必要があります。
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 00000000000..433b89fa387
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: ステップ 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+長方形の角がまだ鋭すぎますね。
+
+`.one` 要素のすべての角を、`border-radius` プロパティを使って半径 9 ピクセルに丸めましょう。
+
+# --hints--
+
+`border-radius` プロパティを `9px` に設定する必要があります。
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+`.one` 要素の `border-radius` の値が `9px` である必要があります。
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 00000000000..5f46278bcc5
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: ステップ 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+`.two` セレクターにも `border-radius` プロパティを使用して、左上と右下を半径 `8px`、右上と左下を半径 `10px` に設定しましょう。
+
+# --hints--
+
+`border-radius` プロパティを `8px 10px` に設定する必要があります。
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+`.two` 要素の `border-radius` の値が `8px 10px` である必要があります。
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 00000000000..03c0bc4c084
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: ステップ 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+`border-radius` プロパティは、左上、右上、右下、左下の角を丸める 4 つの値を取ります。
+
+`.three` の左上の角を半径 30 ピクセル、右上を半径 25 ピクセル、右下を半径 60 ピクセル、左下を半径 12 ピクセルにそれぞれ丸めてください。
+
+# --hints--
+
+`border-radius` プロパティを `30px 25px 60px 12px` に設定する必要があります。
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+`.three` 要素の `border-radius` の値が `30px 25px 60px 12px` である必要があります。
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 00000000000..52b8b32b5d1
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: ステップ 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+より手描きのような不完全な見た目にするため、それぞれの長方形を回転させましょう。
+
+`.one` セレクターに `transform` プロパティを使用して、反時計回りに 0.6 度回転 (`rotate`) させてください。
+
+# --hints--
+
+`transform` プロパティを `rotate(-0.6deg)` に設定する必要があります。
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+`.one` 要素の `transform` の値が `rotate(-0.6deg)` である必要があります。
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 00000000000..b248dfa0f3b
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: ステップ 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+`.two` 要素を時計回りに 0.4 度回転させてください。
+
+# --hints--
+
+`transform` プロパティを `rotate(0.4deg)` に設定する必要があります。
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+`.two` 要素の `transform` の値が `rotate(0.4deg)` である必要があります。
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 00000000000..057a1430c15
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: ステップ 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+`.three` を反時計回りに 0.2 度回転させてください。
+
+この最後のステップを終えたら、ロスコの絵画の完成です。
+
+# --hints--
+
+`transform` プロパティを `rotate(-0.2deg)` に設定する必要があります。
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+`.three` 要素の `transform` の値が `rotate(-0.2deg)` である必要があります。
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 00000000000..40d988d0866
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,150 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: ステップ 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+これらの仕切り線を作成する利点は、特有のクラスを適用して個別にスタイルを指定できることです。 最後の `.divider` の `class` に `dbl-indent` (double indent、2 倍のインデントの略) を追加してください。
+
+# --hints--
+
+最後の `.divider` 要素の `class` に `dbl-indent` を追加する必要があります。 既存の値は削除しないでください。
+
+```js
+const last = document.querySelector('.daily-value.sm-text')?.lastElementChild;
+assert(last?.classList?.contains('dbl-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 00000000000..f7b8b3ae6f5
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,156 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: ステップ 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+`.dbl-indent` セレクターを作成して、左側のマージンを `2em` に設定してください。
+
+# --hints--
+
+新しく `.dbl-indent` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent'));
+```
+
+`.dbl-indent` セレクターの `margin-left` プロパティを `2em` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 00000000000..9695019deb8
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,193 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: ステップ 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+`.dbl-indent` 要素の下に新しい `p` 要素を作成し、テキストを `Includes 10g Added Sugars 20%` としてください。 新しい `p` 要素も、2 倍インデントされ、下端の境界線がないようにしてください。 また `span` を使用して `20%` の部分を太字かつ右揃えにしてください。
+
+そして、`p` 要素の後に仕切り線をもう 1 つ作成してください。
+
+# --hints--
+
+`.daily-value.sm-text` 要素の最後に新しい `p` 要素と `div` 要素を作成する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+新しい `p` 要素は `Includes 10g Added Sugars 20%` というテキストを持つ必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+新しい `p` 要素の `class` 属性を `dbl-indent no-divider` に設定する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent'));
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+新しい `p` 要素内に `span` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+`span` 要素の `class` 属性を `bold right` に設定する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right'));
+```
+
+`span` 要素は `20%` というテキストを囲む必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%');
+```
+
+新しい `div` の `class` 属性を `divider` に設定する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 00000000000..d77aea6bbdf
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,176 @@
+---
+id: 615f887466db4ba14b5342cc
+title: ステップ 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+最後の仕切り線の後に `p` 要素をもう 1 つ作成し、テキストを `Protein 3g` にしてください。 適切なクラスを使用して下端の境界線を取り除き、`span` を使用して `Protein` の部分を太字にしてください。
+
+その要素の後に、一番太い (lg) 仕切り線を作成してください。
+
+# --hints--
+
+`.daily-value.sm-text` 要素の最後に新しい `p` 要素と `div` 要素を作成する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+新しい `p` 要素は `Protein 3g` というテキストを持つ必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+新しい `p` 要素の `class` 属性を `no-divider` に設定する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+新しい `div` の `class` 属性を `divider lg` に設定する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
new file mode 100644
index 00000000000..13bbd5e8dde
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,175 @@
+---
+id: 615f89e055040ba294719d2f
+title: ステップ 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+太い仕切り線の下に `p` をもう 1 つ作成してください。 `p` 要素のテキストは `Vitamin D 2mcg 10%` としてください。 また、`span` を使用して `10%` の部分を右揃えにしますが、太字にはしないでください。
+
+# --hints--
+
+`.daily-value.sm-text` 要素の最後に新しい `p` 要素を作成する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+新しい `p` 要素は `Vitamin D 2mcg 10%` というテキストを持つ必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+新しい `p` 要素内に `span` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+`span` 要素の `class` を `right` に設定する必要があります。 太字にはしないよう注意してください。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 00000000000..43a802305f3
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,202 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: ステップ 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+もう 1 つ `p` 要素を作成し、テキストを `Calcium 260mg 20%` としてください。 `20%` を右揃えにしてください。 その下に、`p` 要素を作成してテキストを `Iron 8mg 45%` にし、`45%` を右揃えにしてください。
+
+# --hints--
+
+`.daily-value.sm-text` 要素の最後に新しい `p` 要素を 2 つ作成する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+1 つ目の新しい `p` 要素は `Calcium 260mg 20%` というテキストを持つ必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+1 つ目の新しい `p` 要素内に `span` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+1 つ目の `span` 要素の `class` 属性を `right` に設定する必要があります。 太字にはしないでください。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+1 つ目の `span` 要素は `20%` というテキストを囲む必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+2 つ目の新しい `p` 要素は `Iron 8mg 45%` というテキストを持つ必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+2 つ目の新しい `p` 要素内に `span` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+2 つ目の `span` 要素の `class` 属性を `right` に設定する必要があります。 太字にはしないでください。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 00000000000..b7acce18709
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,184 @@
+---
+id: 615f8f1223601fa546e93f31
+title: ステップ 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+`.daily-value` セクションの最後の `p` 要素を作成しましょう。 テキストは `Potassium 235mg 6%` としてください。 `6%` のテキストを右揃えにし、`p` 要素の下端の境界線を取り除いてください。
+
+# --hints--
+
+`.daily-value.sm-text` 要素の最後に新しい `p` 要素を作成する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+新しい `p` 要素の `class` 属性を `no-divider` に設定する必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+新しい `p` 要素は `Potassium 235mg 6%` というテキストを持つ必要があります。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+新しい `p` 要素内に `span` 要素が 1 つ必要です。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+`span` 要素の `class` を `right` に設定する必要があります。 太字にはしないよう注意してください。
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
new file mode 100644
index 00000000000..4264e6230c6
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,176 @@
+---
+id: 615f94786869e1a7fec54375
+title: ステップ 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+`.note` セレクターを作成して、フォントサイズを `0.6rem` に設定してください。 また、上下のマージンを `5px` に設定し、左右のマージンを削除してください。
+
+# --hints--
+
+新しく `.note` セレクターが必要です。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+`.note` セレクターの `font-size` プロパティを `0.6rem` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+`.note` セレクターの `margin` プロパティを `5px 0` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
+      </div>
+      <div class="divider md"></div>
+      <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
new file mode 100644
index 00000000000..b6278f7b2a9
--- /dev/null
+++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,325 @@
+---
+id: 615f951dff9317a900ef683f
+title: ステップ 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+`.note` セレクターの左右のパディングを `8px` に設定し、上下のパディングを削除してください。 また、`text-indent` プロパティを `-8px` に設定してください。
+
+この最後の変更で、栄養成分表示ラベルの完成です！
+
+# --hints--
+
+`.note` セレクターの `padding` プロパティを `0 8px` に設定する必要があります。
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+`.note` セレクターの `text-indent` プロパティを `-8px` に設定する必要があります。
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
+      </div>
+      <div class="divider md"></div>
+      <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
+      </div>
+      <div class="divider md"></div>
+      <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
index c4e4aeaf4e0..c6189cfa276 100644
--- a/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
+++ b/curriculum/challenges/portuguese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
@@ -26,20 +26,20 @@ As linhas do dataset representam os pacientes e as colunas representam informaç
 
 Nome do arquivo: medical_examination.csv
 
-|                  Funcionalidade                  | Tipo de variável  |  Variável   |                     Tipo de valor                     |
-|:------------------------------------------------:|:-----------------:|:-----------:|:-----------------------------------------------------:|
-|                      Idade                       | Recurso objetivo  |     age     |                      int (dias)                       |
-|                      Altura                      | Recurso objetivo  |   height    |                       int (cm)                        |
-|                       Peso                       | Recurso objetivo  |   weight    |                      float (kg)                       |
-|                      Gênero                      | Recurso objetivo  |   gender    |                   código categórico                   |
-|            Pressão arterial sistólica            | Recurso de exame  |    ap_hi    |                          int                          |
-|           Pressão arterial diastólica            | Recurso de exame  |    ap_lo    |                          int                          |
-|                    Colesterol                    | Recurso de exame  | cholesterol | 1: normal, 2: acima do normal, 3: bem acima do normal |
-|                     Glicose                      | Recurso de exame  |    gluc     | 1: normal, 2: acima do normal, 3: bem acima do normal |
-|                      Fumar                       | Recurso subjetivo |    smoke    |                        binário                        |
-|                Consumo de álcool                 | Recurso subjetivo |    alco     |                        binário                        |
-|                 Atividade física                 | Recurso subjetivo |   active    |                        binário                        |
-| Presença ou ausência de doenças cardiovasculares |   Variável alvo   |   cardio    |                        binário                        |
+|                  Funcionalidade                  | Tipo de variável  |   Variável    |                     Tipo de valor                     |
+|:------------------------------------------------:|:-----------------:|:-------------:|:-----------------------------------------------------:|
+|                      Idade                       | Recurso objetivo  |     `age`     |                      int (dias)                       |
+|                      Altura                      | Recurso objetivo  |   `height`    |                       int (cm)                        |
+|                       Peso                       | Recurso objetivo  |   `weight`    |                      float (kg)                       |
+|                      Gênero                      | Recurso objetivo  |   `gender`    |                   código categórico                   |
+|            Pressão arterial sistólica            | Recurso de exame  |    `ap_hi`    |                          int                          |
+|           Pressão arterial diastólica            | Recurso de exame  |    `ap_lo`    |                          int                          |
+|                    Colesterol                    | Recurso de exame  | `cholesterol` | 1: normal, 2: acima do normal, 3: bem acima do normal |
+|                     Glicose                      | Recurso de exame  |    `gluc`     | 1: normal, 2: acima do normal, 3: bem acima do normal |
+|                      Fumar                       | Recurso subjetivo |    `smoke`    |                        binário                        |
+|                Consumo de álcool                 | Recurso subjetivo |    `alco`     |                        binário                        |
+|                 Atividade física                 | Recurso subjetivo |   `active`    |                        binário                        |
+| Presença ou ausência de doenças cardiovasculares |   Variável alvo   |   `cardio`    |                        binário                        |
 
 ## Tarefas
 
diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index a4b1ca0de01..8081b745103 100644
--- a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 O texto de um link deve ser colocado entre as tags de abertura e fechamento de um elemento de âncora (`a`). Por exemplo, `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` é um link com o texto `click here to go to freeCodeCamp.org`.
 
-Adicione o texto `cat photos` ao elemento de âncora. Ele se tornará o texto do link.
+Adicione o texto `link to cat pictures` ao elemento de âncora. Ele se tornará o texto do link.
 
 # --hints--
 
@@ -25,12 +25,12 @@ O elemento de âncora (`a`) deve ter uma tag de fechamento. As tags de fechament
 assert(code.match(/<\/a\>/));
 ```
 
-O elemento de âncora (`a`) deve conter o texto `cat photos`. Certifique-se de colocar o texto do link entre as tags de abertura e de fechamentoa do elemento de âncora (`a`).
+O elemento de âncora (`a`) deve conter o texto `link to cat pictures`. Certifique-se de colocar o texto do link entre as tags de abertura e de fechamentoa do elemento de âncora (`a`).
 
 ```js
 assert(
   document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'cat photos'
+    'link to cat pictures'
 );
 ```
 
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
index 3081524e635..e98ea6d8a19 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -9,7 +9,7 @@ dashedName: step-11
 
 Текст посилання повинен бути розміщений між початковим та кінцевим теґами елемента прив'язки (`a`). Наприклад, `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` є посиланням з текстом `click here to go to freeCodeCamp.org`.
 
-Додайте текст `cat photos` до елемента прив'язки. Це буде текстом посилання.
+Додайте текст `link to cat pictures` до елемента прив'язки. Це буде текстом посилання.
 
 # --hints--
 
@@ -25,12 +25,12 @@ assert(document.querySelector('a'));
 assert(code.match(/<\/a\>/));
 ```
 
-Текст вашого елемента прив'язки (`a`) повинен бути `cat photos`. Переконайтеся, що розмістили текст посилання між початковим та кінцевим теґами елемента прив'язки (`a`).
+Текст вашого елемента прив'язки (`a`) повинен бути `link to cat pictures`. Переконайтеся, що розмістили текст посилання між початковим та кінцевим теґами елемента прив'язки (`a`).
 
 ```js
 assert(
   document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
-    'cat photos'
+    'link to cat pictures'
 );
 ```
 
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md
new file mode 100644
index 00000000000..19821a99b1c
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md
@@ -0,0 +1,62 @@
+---
+id: 62a2401b9842721796b72850
+title: Крок 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Надайте своєму елементу `#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.
+```
+
+# --hints--
+
+Ваш елемент `#text` повинен мати цитований вище текст.
+
+```js
+const text = document.querySelector('#text');
+assert.equal(text.innerText, "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.");
+```
+
+# --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>
+</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>
+--fcc-editable-region--
+        <div id="text">
+
+        </div>
+--fcc-editable-region--
+    </div>
+</body>
+</html>
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md
new file mode 100644
index 00000000000..a471932d4cd
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md
@@ -0,0 +1,86 @@
+---
+id: 62a2409897ec621942234cf6
+title: Крок 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Надайте елементу `#text` властивості `background-color` зі значенням `black`, `color` зі значенням `white` та відступи зі значенням `10px` з усіх боків.
+
+# --hints--
+
+Ви повинні мати селектор `#text`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('#text');
+assert.exists(text);
+```
+
+Ваш елемент `#text` повинен мати `background-color` зі значенням `black`.
+
+```js
+const background = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('background-color');
+assert.equal(background, 'black');
+```
+
+Ваш елемент `#text` повинен мати `color` зі значенням `white`.
+
+```js
+const color = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('color');
+assert.equal(color, 'white');
+```
+
+Ваш елемент `#text` повинен мати відступ зі значенням `10px` зі всіх сторін.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('padding');
+assert.equal(padding, '10px');
+```
+
+# --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>
+</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;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md
new file mode 100644
index 00000000000..d795195f4b5
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md
@@ -0,0 +1,101 @@
+---
+id: 62a241df03c1f61ce936f5d9
+title: Крок 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Зрештою надайте своїм елементам `.stat` властивість `padding-right` зі значенням `10px`.
+
+# --hints--
+
+Ви повинні мати селектор `.stat`.
+
+```js
+const stat = new __helpers.CSSHelp(document).getStyle('.stat');
+assert.exists(stat);
+```
+
+Ваш селектор `.stat` повинен мати `padding-right` зі значенням `10px`.
+
+```js
+const paddingRight = new __helpers.CSSHelp(document).getStyle('.stat')?.getPropertyValue('padding-right');
+assert.equal(paddingRight, '10px');
+```
+
+# --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>
+</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;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md
new file mode 100644
index 00000000000..f8b7dab6340
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md
@@ -0,0 +1,132 @@
+---
+id: 62a3a0a3c0a4b32915d26a6e
+title: Крок 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Вилучіть рядок `console.log("Hello World");`, щоб почати писати код свого проєкту.
+
+В JavaScript <dfn>змінну</dfn> використовують для утримання значення. Щоб використати змінну, потрібно <dfn>оголосити</dfn> її. Наприклад, щоб оголосити змінну `camperbot`, ви б написали:
+
+```js
+var camperbot;
+```
+
+Ключове слово `var` повідомляє JavaScript, що ви оголошуєте змінну. Оголосіть змінну під назвою `xp`.
+
+# --hints--
+
+Вам не потрібен рядок `console.log("Hello World");` у своєму коді.
+
+```js
+assert.notMatch(code, /console\.log\("Hello World"\);/);
+```
+
+Ви повинні використати ключове слово `var`, щоб оголосити змінну.
+
+```js
+assert.match(code, /var/);
+```
+
+Ви повинні оголосити змінну під назвою `xp`.
+
+```js
+assert.match(code, /xp/);
+```
+
+Ви не повинні присвоювати значення своїй змінній.
+
+```js
+assert.notMatch(code, /var xp =/);
+```
+
+Не забудьте про крапку з комою в кінці рядка.
+
+```js
+assert.match(code, /var xp;/);
+```
+
+# --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--
+console.log("Hello World");
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md
new file mode 100644
index 00000000000..79073d885a1
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md
@@ -0,0 +1,112 @@
+---
+id: 62a3a488b24fb32b91155d56
+title: Крок 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Змінним можна <dfn>присвоїти</dfn> значення. Якщо так зробити під час оголошення, це називається <dfn>ініціалізацією</dfn>. Наприклад:
+
+```js
+var camperbot = "Bot";
+```
+
+Це ініціалізує змінну `camperbot` зі значенням `Bot`. Ініціалізуйте змінну `xp`, щоб вона мала значення `0`.
+
+# --hints--
+
+`xp` повинне мати значення `0`.
+
+```js
+assert.equal(xp, 0);
+```
+
+Вам потрібно ініціалізувати змінну `xp` до `0`. Не забудьте про крапку з комою в кінці рядка.
+
+```js
+assert.match(code, /var\s+xp\s*=\s*0\s*;/)
+```
+
+# --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;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md
new file mode 100644
index 00000000000..f4a2e8cb755
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md
@@ -0,0 +1,136 @@
+---
+id: 62a3a75d8466a12e009eff76
+title: Крок 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Ініціалізуйте іншу змінну `health` зі значенням `100` та змінну `gold` зі значенням `50`.
+
+# --hints--
+
+Ви повинні використати `var`, щоб оголосити змінну `health`.
+
+```js
+assert.match(code, /var health/);
+```
+
+Вам потрібно ініціалізувати змінну під назвою `health` зі значенням `100`.
+
+```js
+assert.match(code, /var health\s?=\s?100/);
+```
+
+Ви повинні використати `var`, щоб оголосити змінну `gold`.
+
+```js
+assert.match(code, /var gold/);
+```
+
+Вам потрібно ініціалізувати змінну під назвою `gold` зі значенням `50`.
+
+```js
+assert.match(code, /var gold\s?=\s?50/);
+```
+
+`health` повинна мати значення `100`.
+
+```js
+assert.equal(health, 100);
+```
+
+`gold` повинна мати значення `50`.
+
+```js
+assert.equal(gold, 50);
+```
+
+`xp` досі повинна мати значення `0`.
+
+```js
+assert.equal(xp, 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;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md
new file mode 100644
index 00000000000..5007857537b
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md
@@ -0,0 +1,122 @@
+---
+id: 62a3a7e4f1060e2fc5ffb34b
+title: Крок 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Створіть іншу змінну `currentWeapon` та встановіть її на 0.
+
+Якщо змінна має пару слів, за правилами JavaScript потрібно використати <dfn>верблюдячийРегістр</dfn>. Перше слово з малої літери, а кожне наступне – з великої.
+
+# --hints--
+
+Ви повинні використати `var`, щоб оголосити змінну `currentWeapon`.
+
+```js
+assert.match(code, /var currentweapon/i);
+```
+
+Ви повинні використати верблюдячийРегістр, щоб назвати свою змінну.
+
+```js
+assert.match(code, /currentWeapon/);
+```
+
+Ваша змінна `currentWeapon` повинна бути встановлена на `0`.
+
+```js
+assert.equal(currentWeapon, 0);
+```
+
+Вам потрібно ініціалізувати свою змінну на `0`.
+
+```js
+assert.match(code, /var currentWeapon\s?=\s?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;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md
new file mode 100644
index 00000000000..291d3873975
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md
@@ -0,0 +1,115 @@
+---
+id: 62a3b3eab50e193608c19fc6
+title: Крок 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Оголосіть змінну `fighting`, використовуючи ключове слово `let`, але не ініціалізуйте її зі значенням. Не забудьте поставити крапку з комою в кінці рядка.
+
+# --hints--
+
+Ви повинні використати `let`, щоб оголосити змінну `fighting`.
+
+```js
+assert.match(code, /let fighting/);
+```
+
+Ваша змінна `fighting` не повинна мати значення.
+
+```js
+assert.isUndefined(fighting);
+```
+
+Ви не повинні присвоювати значення своїй змінній `fighting`. Не забудьте про крапку з комою в кінці рядка.
+
+```js
+assert.match(code, /let fighting;/);
+```
+
+# --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;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md
new file mode 100644
index 00000000000..4f377091c90
--- /dev/null
+++ b/curriculum/challenges/ukrainian/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md
@@ -0,0 +1,140 @@
+---
+id: 62a3b41c9494f937560640ab
+title: Крок 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Оголосіть ще дві змінні `monsterHealth` та `inventory`, але не ініціалізовуйте їх.
+
+# --hints--
+
+Ви повинні використати `let`, щоб оголосити змінну `monsterHealth`.
+
+```js
+assert.match(code, /let monsterHealth/i);
+```
+
+Ви повинні використати верблюдячийРегістр, щоб назвати свою змінну `monsterHealth`.
+
+```js
+assert.match(code, /monsterHealth/);
+```
+
+`monsterHealth` не повинна мати значення.
+
+```js
+assert.isUndefined(monsterHealth);
+```
+
+Ви не повинні присвоювати значення своїй змінній `monsterHealth`. Не забудьте про крапку з комою.
+
+```js
+assert.match(code, /let monsterHealth;/);
+```
+
+Ви повинні використати `let`, щоб оголосити змінну `inventory`.
+
+```js
+assert.match(code, /let inventory/i);
+```
+
+`inventory` не повинна мати значення.
+
+```js
+assert.isUndefined(inventory);
+```
+
+Ви не повинні присвоювати значення своїй змінній `inventory`. Не забудьте про крапку з комою.
+
+```js
+assert.match(code, /let inventory;/);
+```
+
+# --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;
+--fcc-editable-region--
+```